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

来源：互联网发布：淘宝店铺推广怎么推啊编辑：程序博客网时间：2024/06/07 05:09

<!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 版本的重大变化

1 0