创建一个简单的路由
1、可以在bootcdn官网上直接下载vue-router的js文件来做练习
2、新建一个html页面，引入vue-router.js，但首先要引入vue.js（因为vue.router.js是依赖于vue.js的）
3、①定义一个根实例组件
<div id='app'></div>
new Vue({
el:'#app' ,
})
②定义一个首页子组件
var home = {
template:'<h2>我是首页模版</h2>'
}
③定义路由，并在根组件中添加路由
var router = new VueRouter({
})
new Vue({
el:'#app',
router
})
④定义路由规则(如果规则中使用的是components，那么必须给router-view添加name属性)
var router = new VueRouter({
routes:[
{
path:'/home', //定义路由匹配路径
component:home //规定该路由规则所要展示的组件
}]
})
⑤声明router-link以及router-view，router-link会被解析成a标签，to属性会被解析成a标签的href属性，to属性里面的内容就是所要匹配的路由路径的值，即routes当中path的值，创建router-view标签，用来展示router-link所匹配到的组件的内容
注
router-link中to属性必须写，即使是给空值，也要写，不然会报错
<div id="app">
<router-link to="/home">我要去首页</router-link>
<router-view></router-view>
</div>
路由当中的参数传递
建立如下的页面（不包含子路由）：
<body>
<div id="app">
<router-link to="/home">我要去首页</router-link>
<div>
<router-link v-for="v in news" to="/content">{{v.title}}</router-link>
</div>
<router-view></router-view>
</div>
<script type="text/x-template" id="content">
<div>
<h2>我是内容展示模版</h2>
</div>
</script>
<script>
//定义内容组件所要使用的数据变量
var news = [
{id:1,title:'第一条',content:'第一条的详细内容'},
{id:1,title:'第二条',content:'第二条的详细内容'},
{id:1,title:'第三条',content:'第三条的详细内容'},
];
//定义首页组件
var home = {
template:'<h2>我是首页模版</h2>',
};
//定义内容组件
var content = {
template:'#content' //这里会去找id为content的script标签，将模版提出去的好处是格式可以控制
};
//定义路由
var router = new VueRouter({
routes:[
{
path:'/home',
component:home
},
{
path:'/content',
component:content
}
]
});
new Vue({
el:'#app',
router,
data:{
news
}
})
</script>
</body>
此时点击‘第一条’或者是‘第二条’或者是‘第三条’显示的是模版里写死的内容，不能显示对应编号下的详细内容，需要通过路由路径传参数（数组的下标）
第一种修改方式
① 修改路由规则：（path中冒号前面的/不一定非要是/，也可以+，-等等其他的符号，只要router-link当中的to值格式与此一致即可）
{
path:'/content/:key',
component:content
}
②修改对应route-link的to值格式：
<router-link v-for="(v,k) in news" :to="'/content/' + k">{{v.title}}</router-link>
第二种修改方式
①给路由规则添加name属性并修改路径属性
{
path:'/content/:key',
name:'content', //值任意，只要router-link当中的to值与此一致即可
component:content
}
②修改对应router-link的to值
//其中name的值要与路由规则中的name值保持一致，参数当中的key要与路由规则中path后面跟的参数保持一致,to后面跟的是对象形式的字符串
<router-link v-for="(v,k) in news" :to="{name:'content',params:{key:k}}">{{v.title}}</router-link>
上面两种方式都可以通过路由给组件传递值
③修改内容组件的模版
<script type="text/x-template" id="content">
<div>
<h2>{{oneNew.title}}</h2>
<p>{{oneNew.content}}</p>
</div>
</script>
var content = {
template:'#content',
data(){
return{
oneNew:{}
}
},
//通过钩子函数获取参数
mounted(){
var key = this.$route.params.key;
this.oneNew = news[key];
}
};
此时只有从首页第一次点击的时候才会有内容展示，之后再点‘ 第一条’或‘第二条’或‘第三条’，不会有内容的变化，因为mounted钩子函数只有在组件被挂载后才会触发，而挂载完成后的点击只是路由路径发生变化，组件没有消失，不会被重新挂载，所以此时可以给内容组件添加一个监听属性，监听路由
var content = {
template:'#content',
data(){
return{
oneNew:{}
}
},
mounted(){
var key = this.$route.params.key;
this.oneNew = news[key];
},
watch:{
$route(){
var key = this.$route.params.key;
this.oneNew = news[key];
}
}
};
此时再点击就会发现内容组件当中的内容发生了变化
网友评论