Vue-router的配置以及实战（易错点）
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinat_35512245/article/details/54023046
<!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 版本还有很多变化，具体可参考如下链接：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017年01月04日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
