Vue学习-06：vue-router 路由、js操纵路由、路由参数

前提：直接引入 vue.js 和 vue-router.js 的情况下

1、vue-router

[code]    window.onload = function() {                          //第一步：创建路由
let r1 = new VueRouter({                      //VueRouter 是个对象
routes: [{                                //routes 是数组,来存放路由
path: '/user',                        //path:路径
component: {                          //component：
template: '<div>用户列表</div>'    //template：里有且只有一个顶级元素
}
}, {
path: '/article',
component: {
template: '<div>文章列表</div>'
}
}]
})
let vm = new Vue({
el: '#div1',
router: r1                                //第二步：调用路由
})
}

[code]<div id="div1">
<router-link to="/user">用户</router-link>          //相当于<a>
<router-link to="/article">文章</router-link>       //to 相当于 href
<router-view></router-view>                         //渲染容器
</div>

知识点：

路由就像一个锚点，根据锚点信息，确定要显示哪个组件。（类似于选项卡）

<router-view> 渲染容器，用于盛放 component 下 template 中的内容；

前端路由一般要求页面不跳转 #/；

<router-link> 当有多个该标签是，vue 会提供 .router-link-active (当前路由)

2、用 js 操作 router

[code]    window.onload = function() {
let r1 = new VueRouter({
routes: [{
path: '/user',
component: {
template: '<div>用户列表</div>'
}
}, {
path: '/article',
component: {
template: '<div>文章列表</div>'
}
}, {
path: '/comment',
component: {
template: '<div>留言列表</div>'
}
}]
})
let vm = new Vue({
el: '#div1',
router: r1,
methods: {
fn_forward() {
this.$router.go(1)           // +1 前进
},
fn_back() {
this.$router.go(-1)          // this.$router 相当于 r1
},
fn_push() {
this.$router.push('/article')//push 方法,相当于<router-link>里的to
}
}
})
}

[code]    <div id="div1">
<input type="button" value="后退" @click="fn_back">
<input type="button" value="前进" @click='fn_forward'>
<input type="button" value="到文章" @click='fn_push'>
<br>
<router-link to="/comment">留言</router-link>
<router-link to="/user">用户</router-link>
<router-link to="/article">文章</router-link>
<router-view>文章</router-view>
</div>

3、带参数的路由

[code]    window.onload = function() {
let r1 = new VueRouter({
routes: [{
path: '/user/:id',     //注意参数要带 :
component: {
template: '<div>当前用户的ID：{{$route.params.id}}</div>'
}                      //注意,$route.params 容易写错
}]
})
let vm = new Vue({
el: '#div1',
router: r1
})
}

[code]    <div id="div1">
<router-link to="/user/1234">用户1</router-link>
<router-link to="/user/5678">用户2</router-link>
<router-link to="/user/9101">用户3</router-link>
<router-view></router-view>
</div>

知识点：

注意 routes 里 path 和 component 里 template 的参数写法（$route.params）；