Vue-router的配置以及实战（易错点）

墨蓝 2022-07-13 09:46 139阅读 0赞

<!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 版本的重大变化][vue-router2.x]

[vue-router2.x]: https://segmentfault.com/a/1190000006623100?utm_source=tuicool&utm_medium=referral