Vue-router的配置以及实战(易错点)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="box">
    <ul>
        <li>
            <router-link to='/home'>主页</router-link>
        </li>
        <li>
            <router-link to='/news'>新闻</router-link>
        </li>
    </ul>
    <!--路由配置的组件将会渲染在这里-->
    <router-view></router-view>
</div>
<template id="home">
    <h3>我是主页</h3>
</template>
<template id="news">
    <h3>我是新闻</h3>
</template>
</body>
<script>
    var Home = {
        template: '#home'
    };
    var News = {
        template: '#news'
    };
    //准备、定义路由
    var routers = [
        {path: '/home', component: Home},
        {path: '/', component: Home},
        {path: '/news', component: News}
    ];
    //创建router实例
    var router = new VueRouter({
        routes: routers
    });
    //创建和挂载根实例
    var app = new Vue({
        router: router
    }).$mount('#box');
</script>
</html>

上面是一个实例,其中,我要特别指出的是(也是我自己遇到的坑),
vue-router2.x 版本相比之前的0.7.x版本,有很多破坏性改变,这导致很多跟着视频学习的人会遇到很多不知名的错误(敲脑袋:我明明跟视频里的代码一模一样啊,为什么错!)

咳咳,划重点了!!!

重大改变如下:

1、routes 选项取代了 router.map() 。此外,路由配置现在用数组而不是用对象哈希表来作为数据结构。这保证了一致的匹配次序(对象键值枚举的次序是依赖浏览器器的)。

例如上面代码中(vue-router2.x 版本):

//准备、定义路由
    var routers = [
        {path: '/home', component: Home},
        {path: '/', component: Home},
        {path: '/news', component: News}
    ];

原来0.7.x版本:

router.map({
            'home':{
                component:Home
            },
            'news':{
                component:News
            }
        });

2、router.redirect 已经被丢弃了!被丢弃了!被丢弃了!(重要的事情说三遍)!现在可以在 routes 中直接声明:
在代码

 //准备、定义路由
    var routers = [
        {path: '/home', component: Home},
        {path: '/', component: Home},
        {path: '/news', component: News}
    ];

{path: ‘/’, component: Home},表示默认打开主页home!
再说一遍:

router.redirect({
            '/':'/home'
        });

上面的写法丢弃了!

当然了,vue-router2.x 版本还有很多变化,具体可参考如下链接:

vue-router2.x 版本的重大变化

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页