更多优质内容
请关注公众号
请关注公众号
Vue Router 是 vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
上面是vue-router官网对vue路由的介绍和定义。
下面正式介绍vue-router的基本用法，下面的介绍是基于vue-cli脚手架项目来讲解的：
如果不使用脚手架项目就要安装vue-router模块才能使用vue路由:
cnpm install vue-router --save
如果使用了脚手架项目则无需安装,它已经装好了vue路由
假如你已经在components目录下定义了两个组件 Apple.vue 和 Banana.vue ,然后在main.js引用并注册vue-router：
PS:如果是在vue-cli中,路由映射是在 /router/index.js 中写的
// # main.js
import VueRouter from 'vue-router'
import Apple from "./components/Apple" #引入自定义组件
import Banana from "./components/Banana"
Vue.use(VueRouter)
//在实例化vue-router时定义一份映射
let router = new VueRouter({
mode:"history", //默认这些路由不会再浏览器的历史记录中记录的，设成history就定义可以留下历史记录
routes:[ //定义路由映射
{
path:"/apple",
component:Apple
},
{
path:"/banana",
component:Banana
},
]
})
new Vue({
router, //这里要添加上router
el:"#app",
...
})
<!-- Apple.Vue -->
<template>
<div>
Apple.vue
</div>
</template>
<script>
</script>
然后我们在根组件中的特定位置使用
<router-view></router-view>就能显示出对应路由的组件内容
<!-- App.vue -->
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>例如 我现在输入网址为127.0.0.1/apple
此时显示出的就是Apple这个组件的内容
但是整个页面只是局部是Apple的内容
这里咱们顺便说一下vue路由的hash和history这两种模式
vue-router 默认hash模式 —— 使用 URL 的 hash来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
history在url改变的时候页面时会重新加载页面
在使用hash模式的时候，url是会带一个#号的
例如 127.0.0.1/#/apple
而history模式则不会 ： 127.0.0.1/apple
路由间跳转
可以使用<router-link :to="{path:'xxx'}">组件来跳转页面
<template>
<div id="app">
<div class="box">
<router-view></router-view>
<router-link :to="{path:'/apple'}">跳转到Apple页面</router-link>
<router-link :to="{path:'/banana'}">跳转到Banana页面</router-link>
</div>
</div>
</template><router-link>组件编译后会转成<a>标签
但是跳转的时候，页面不会重新被加载
vue-router 路由参数
在router映射中定义路由规则的时候可以设定参数，例如：
routes:[
{
path:"/apple/:color",
component:Apple
}
]:color就是参数
可以在apple子组件的内容部通过
this.$router.params
接收参数
在子组件的模板中可以直接使用
{{$router.params.参数名}}
来访问参数
嵌套路由（子路由）
现在我apple下面还有子页面，那么可以这样定义
import RedApple from "@/component/RedApple"
...
routes:[
{
path:"/apple",
component:Apple,
children:{
path:'red',
component:RedApple
}
}
]
...此时 访问 /apple/red 就能访问到这个页面，貌似和之前定义的 apple/:color 没有什么区别，但是嵌套路由的好处是可以在apple子组件中继续插入<router-view>的路由子组件
如下：
#/src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Apple from '@/components/Apple'
import RedApple from '@/components/RedApple'
Vue.use(Router)
export default new Router({
mode:"history",
routes: [
{
path:"/apple",
name:"apple",
component:Apple,
children:[
{
path:"red",
component:RedApple
}
]
}
]
})#App.vue
<template>
<div id="app">
<div class="box">
<router-view></router-view>
<router-link :to="{path:'/apple'}">跳转到Apple页面</router-link>
<router-link :to="{path:'/banana'}">跳转到Banana页面</router-link>
</div>
</div>
</template>#Apple.vue
<template>
<div>
<div>我是苹果</div>
<router-view></router-view> <!--这里显示“红苹果”-->
</div>
</template>#RedApple.vue
<template>
<div>
<div>红苹果</div>
</div>
</template>PS 如果你希望访问/apple的时候就能访问到redApple的内容,可以这样写:
{
path:"/apple",
name:"apple",
component:Apple,
children:[
{
path:"",
component:RedApple
}
]
}
只需要在children的path留空即可
================================
<router-link>的几种写法
<router-link :to="{path:'/apple'}">
或者
<router-link :to="'/apple'">
或者
<router-link to="/apple">
还可以传参
<router-link :to="{path:'/apple'，param:{color:'red'}}">
具名路由
<router-link :to="{name:'apple'}">
这种情况是在定义路由的时候，在映射表中给路由加了name属性时可以这么用。
如果你希望她解析出来不是一个a标签而是一个li标签，可以这样：
<router-link to="/apple" tag="li">
在js中进行跳转：
router.push({path:"apple"})
执行到这个就会跳转到apple页面
==================================
命名视图：
我们可以在<router-view>标签中添加name属性,同一个路由针对<router-view>标签的不同的name属性可以使用不同的子组件：
<router-view name="viewA"></router-view>
<router-view name="viewB"></router-view>在映射表中：
routes:[
{
path:'/apple',
component:{
viewA:Apple1, #组件Apple1
viewB:Apple2
}
}
]重定向：
只需在映射表中这样：
routes:[
{
path:"/apple",
redirect:"/banana"
}
]表示访问apple就会重定向到banana
更多关于vue-router的使用请参考vue-router官网文档
