基本使用：
Url 中 # 之后部分是 Url 的哈希值，哈希值用来指定界面中的某个位置。Vue 中路由是指将 Url 中的哈希值与页面中的内容建立映射关系。
<body>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<div id="app">
<router-view></router-view>
</div>
<script>
var templateOne = {
template: '<div>子组件一</div>'
}
var templateTwo = {
template: '<div>子组件二</div>'
}
var myRouter = new VueRouter({
routes: [{path: '/one', component: templateOne},{path: '/two', component: templateTwo}]
})
var vm = new Vue({
el: '#app',
router: myRouter
})
</script>
</body>使用 Vue 的路由功能需要引入 vue.js 、vue-router.js。创建 templateOne 组件、templateTwo 组件，创建 VueRouter 将组件和路径进行映射，最后将 VueRouter 挂载到对应的 Vue 上。router-view 标签就会根据路由匹配对应的组件。
<div id="app">
<router-link to='/one'>One</router-link>
<router-link to="/two">Two</router-link>
<router-view></router-view>
</div>router-link 标签称之为声明式导航，Vue 会将该标签转换为 a 标签，router-link 标签的 to 属性对应 a 标签的 href 属性。to 的属性值最终会被转换成 Url 的哈希值。
参数传递：
<body>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<div id="app">
<router-link to='/params/1'>传递参数：1</router-link>
<router-link to="/params/2">传递参数：2</router-link>
<router-view></router-view>
</div>
<script>
var template = {
template: '<div>参数：{{$route.params.num}}</div>'
}
var myRouter = new VueRouter({
routes: [
{path: '/params/:num', component: template}
]
})
var vm = new Vue({
el: '#app',
router: myRouter
})
</script>
</body>创建 VueRouter 使用冒号声明变量 num，Url 的哈希值为 /params/1，数字 1 是参数部分，通过 $route.params 获取参数。
<div id="app">
<router-link to='/params'>不传递传递参数</router-link>
<router-view></router-view>
</div>
...
var myRouter = new VueRouter({
routes: [
{path: '/params/:num?', component: template}
]
})如果 Url 中哈希值没有参数部分将无法匹配到组件。可以在声明变量时在变量后面添加问号，Url 中的哈希值没有参数部分也会匹配到对应的组件，只是通过 $route.params 获取参数值时值为空。
<body>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<div id="app">
<router-link to='/params/1'>传递参数：1</router-link>
<router-link to="/params/2">传递参数：2</router-link>
<router-view></router-view>
</div>
<script>
var template = {
props: ['num'],
template: '<div>参数：{{num}}</div>'
}
var myRouter = new VueRouter({
routes: [
{path: '/params/:num?', component: template, props: true}
]
})
var vm = new Vue({
el: '#app',
router: myRouter
})
</script>
</body>使用冒号声明变量，将 props 属性值设置为 true，在 template 组件中使用 props 属性声明属性，num 将会为组件的属性，可以直接使用 num 来获取参数值。
<body>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<div id="app">
<router-link to='/params'>传递参数</router-link>
<router-view></router-view>
</div>
<script>
var template = {
props: ['num'],
template: '<div>参数：{{num}}</div>'
}
var myRouter = new VueRouter({
routes: [
{path: '/params', component: template, props: {num: 1}}
]
})
var vm = new Vue({
el: '#app',
router: myRouter
})
</script>
</body>创建路由时 props 属性值为对象，对象中包含一个 num 属性，在组件中使用 props 属性声明 num 属性，该对象的属性会成为组件的属性。可以直接使用 num 来获取参数值。
<body>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<div id="app">
<router-link to='/params'>传递参数</router-link>
<router-view></router-view>
</div>
<script>
var template = {
props: ['num'],
template: '<div>参数：{{num}}</div>'
}
var myRouter = new VueRouter(
{
routes: [
{
path: '/params',
component: template,
props: function (to)
{
return {num: 1}
}
}
]
})
var vm = new Vue({
el: '#app',
router: myRouter
})
</script>
</body>创建路由，props 属性值为函数，函数的参数是 route （路由对象），可以获取路由信息。函数返回一个对象，返回对象包含一个 num 属性，在组件中使用 props 属性声明 num 属性，返回对象的属性会成为组件的属性，可以使用 num 来获取参数值。
嵌套路由：
<body>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<div id="app">
<router-link to='/one'>组件一</router-link>
<router-link to='/two'>组件二</router-link>
<router-view></router-view>
</div>
<script>
var templateOne = {
template: '<div>组件一<router-view></router-view></div>'
}
var templateTwo = {
template: '<div>组件二</div>'
}
var myRouter = new VueRouter({
routes: [
{path: '/one', component: templateOne, children: [{path: '/two', component: templateTwo}]}
]
})
var vm = new Vue({
el: '#app',
router: myRouter
})
</script>
</body>创建 templateOne、templateTwo 组件，在创建路由时使用 children 属性将 templateTwo 组件作为 templateOne 组件的子组件，并在 templateOne 组件模板中放置 router-view 标签。当 Url 的哈希值为 /one 界面只展示 templateOne 组件，当 Url 哈希值为 /two 时界面将同时展示 templateOne 组件和 emplateTwo 组件。
<div id="app">
<router-link to='/one/two'>组件二</router-link>
<router-view></router-view>
</div>
...
var myRouter = new VueRouter({
routes: [
{path: '/one', component: templateOne, children: [{path: 'two', component: templateTwo}]}
]
})配置 templateTwo 组件时，设置 path 属性值为 two，当 Url 的哈希值为 /one/two 时才会匹配到 templateTwo 组件，界面上才会同时展示 templateOne 组件和 emplateTwo 组件。
路由命名：
<body>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<div id="app">
<router-link :to='{name: "one"}'>组件一</router-link>
<router-view></router-view>
</div>
<script>
var templateOne = {
template: '<div>组件一</div>'
}
var myRouter = new VueRouter({
routes: [
{path: '/one', name: 'one', component: templateOne}
]
})
var vm = new Vue({
el: '#app',
router: myRouter
})
</script>
</body>创建路由时，使用 name 属性给路由创建一个名称，可以通过路由名称来访问组件。router-view 标签的 to 属性值是一个对象，对象包含 name 属性，属性值为路由名称。to 属性前面要加冒号。
<body>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<div id="app">
<router-link to='/'>访问组件</router-link>
<router-view name="one"></router-view>
<router-view name="two"></router-view>
</div>
<script>
var templateOne = {
template: '<div>组件一</div>'
}
var templateTwo = {
template: '<div>组件二</div>'
}
var myRouter = new VueRouter({
routes: [
{path: '/', components: {one: templateOne, two: templateTwo}}
]
})
var vm = new Vue({
el: '#app',
router: myRouter
})
</script>
</body>创建路由时使用 components 属性将多个组件匹配给一个路径，并给每个组件创建一个名称。创建多个 router-view 标签，每个表内的 name 属性对应一个组件。这样就可以通过一个路径将多个组件展示在界面上。
<body>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<div id="app">
<router-link to='/'>访问组件</router-link>
<router-view name="one"></router-view>
<router-view></router-view>
</div>
<script>
var templateOne = {
template: '<div>组件一</div>'
}
var templateTwo = {
template: '<div>组件二</div>'
}
var myRouter = new VueRouter({
routes: [
{path: '/', components: {one: templateOne, default: templateTwo}}
]
})
var vm = new Vue({
el: '#app',
router: myRouter
})
</script>
</body>创建路由时使用 components 属性将多个组件匹配给一个路径，并使用 default 属性将 templateTwo 组件设置为默认组件，当 router-view 标签没有设置 name 属性值时，该标会匹配 templateTwo 组件。
重定向：
<body>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<div id="app">
<router-view></router-view>
</div>
<script>
var myTemplate = {
template: '<div>组件一</div>'
}
var myRouter = new VueRouter({
routes: [
{path: '/', redirect: '/template'},{path: '/template', component: myTemplate}
]
})
var vm = new Vue({
el: '#app',
router: myRouter
})
</script>
</body>创建路由，指定 myTemplate 组件的 path 为 /template，使用 redirect 属性将 path 为 / 重定向到 myTemplate 组件，这样打开页面直接重定向到 myTemplate 组件。
var myRouter = new VueRouter({
routes: [
{path: '/', redirect: {name: 'myTemplate'}},{path: '/template', name: 'myTemplate', component: myTemplate}
]
})创建路由，给 myTemplate 组件创建别名，设置重定向时，redirect 属性值是个对象，该对象包含 name 属性，属性值为组件的别名，打开页面直接重定向到 myTemplate 组件。
var myRouter = new VueRouter({
routes: [
{
path: '/',
redirect: function (to) {
return {
name: 'myTemplate'
}
}
},
{path: '/template', name: 'myTemplate', component: myTemplate}
]
})创建路由，给 myTemplate 组件创建别名，设置重定向时，redirect 属性值是个函数，函数的参数是路由对象，通过该对象可以获取路由信息。该函数返回一个对象，返回对象包含 name 属性，属性值为组件的别名，打开页面直接重定向到 myTemplate 组件。
元信息：
<body>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<div id="app">
<router-link to='/meta'>元信息</router-link>
<router-view></router-view>
</div>
<script>
var template = {
template: '<div>组件</div>',
created() {
console.log(this.$route.meta.msg)
}
}
var myRouter = new VueRouter({
routes: [{path: '/meta', component: template, meta: {msg: 'haha'}}]
})
var vm = new Vue({
el: '#app',
router: myRouter
})
</script>
</body>创建路由时使用 meta 属性创建元信息，属性值为对象，对象中包含 msg 属性，在组件中使用路由对象来获取元信息。
编程导航：
<body>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<div id="app">
<button @click="fun">按键</button>
<router-view></router-view>
</div>
<script>
var template = {
template: '<div>组件</div>'
}
var myRouter = new VueRouter({
routes: [{path: '/template', component: template}]
})
var vm = new Vue({
el: '#app',
router: myRouter,
methods: {
fun() {
this.$router.push('/template')
}
}
})
</script>
</body>创建一个 button 按键，点击按键时执行 fun 方法，在 fun 方法中使用 router 的 pust 方法进行路由导航，将 template 组件显示。router 是 VueRouter 的实例，通过赋值给 Vue 的 router 属性挂载在 Vue 上。route 是包含路由信息的对象。
<body>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<div id="app">
<button @click="fun1">按键一</button>
<button @click="fun2">按键二</button>
<button @click="fun3">按键三</button>
<router-view></router-view>
</div>
<script>
var template = {
template: '<div>组件</div>'
}
var myRouter = new VueRouter({
routes: [{path: '/template', component: template}]
})
var vm = new Vue({
el: '#app',
router: myRouter,
methods: {
fun1() {
this.$router.push('/template')
},
fun2() {
this.$router.replace('/template')
},
fun3() {
this.$router.back()
}
}
})
</script>
</body>router 的 push 方法和 replace 方法都可以实现路由的跳转，通过 pust 方法进行路由跳转可以通过 touter 的 back 方法进行历史回退而 replace 方法不行。
路由拦截：
<body>
<script src="./vue.js"></script>
<script src="./vue-router.js"></script>
<div id="app">
<button @click="fun">按键</button>
<router-view></router-view>
</div>
<script>
var template = {
template: '<div>组件</div>'
}
var myRouter = new VueRouter({
routes: [{path: '/template', component: template}]
})
myRouter.beforeEach(function (to,from,next) {
next()
})
var vm = new Vue({
el: '#app',
router: myRouter,
methods: {
fun() {
this.$router.push('/template')
}
}
})
</script>
</body>使用 VueRouter 的 deforeEach 方法给路由添加一个拦截。参数是一个方法。拦截方法有三个参数，第一个参数是目标路由对象，第二个参数是来源路由对象，第三个参数是一个方法，执行该方法对路由拦截进行放行。
3250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
