vue路由vue-router
1.使用路由vue-router
1.安装
npm install vue-router --save
引入并实例化(main.js中)
import VueRouter from 'vue-router'
Vue.use(VueRouter)
2.配置路由
-创建组件，引入组件
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
-定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{path:'', redirect:'/foo'} //没有路由时的默认值
]
- 创建 router 实例，然后传
routes配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
-创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
-在根组件(App.vue)的模板组件中写上
<router-view/> //路由内容的点位，决定渲染的view显示的位置
-使用跳转
<router-link to='/foo'>首页</router-link>
2.配置完路由打开页面时有#(如：http://localhost:8080/#/home
)
可以在创建路由时，定义下模式 mode: 'history', 可以去掉#
const router = new Router({
mode: 'history',
routes: routes});
3.router-link其它属性
<router-link to='/home'>首页</router-link>
router-link会渲染成a标签，渲染成button如何做?增加tag
<router-link to='/home' tag='button'>首页</router-link>
用户在点击了通过路由的跳转后，浏览器的"返回"是可以点击的，点击可以返回路由之前的页面，如果要点击了通过路由的跳转后返回按钮不可用，需要增加replace属性
<router-link to='/home' tag='button' replace>首页</router-link>
路由之间点击后，如果需要加载某个样式class修改下颜色，可以在router-link标签中增加active-class，如
<router-link to='/home' tag='button' replace active-class="red_text">首页</router-link>
.red_text{
color:red
}
这样当点击的路由会变成红色。
或者在创建路由的时候进行配置linkActiveClass，也能使被点击的路由使用red_text样式，例子如下
const router = new Router({
mode: 'history',
routes: routes,
linkActiveClass: 'red_text'
})
4.通过代码来跳转路由
点击按钮后跳转到其他页面的方法
通过this.router是创建路由时的实例对象
this.router.replace('/home')
5.动态路由
-配置动态路由
routes:[
//动态路径参数，以冒号开头
{ path: '/user/:id', component:User}
]
-使用的时候, userId为data()中的属性
<router-link :to=" '/user/' + userId">用户</router-link>
-在对应的User页面通过以下方法获取传递的值
this.route.params.id获取动态路由的传值
6.通过query来传递参数
通过动态路由可以传递参数，另一种传递参数的方式是通过query
$route.query 取到的是通过路由传递过来的对象
<router-link v-bind:to=
"{
path: '/profile',
query: {
name:张三，
age: 22
}
}"></router-link>
如果在button中click事件中传递数据怎么样
-对于动态路由的配置可以这样传递
this.$router.push('/user' + this.userId)
-对于query方式传递参数可以这样写
this.$router.push({
path:'/profile',
query:
{
name：张三，
age:20
}
})
7.路由懒加载
通过路由懒加载优化应用性能
路由懒加载在ES6中的方式例子如下
routes:[
{
path: '/home',
component: () => import('../components/Home')
}
]
8.路由嵌套
实现路由嵌套两个步骤
首先创建对应的子组件，并在路由映射中配置对应的子路由
然后在组件内部使用<router-view/>标签
例子：在首页中增加新闻和消息两个
通过children关键字增加
routes:[
{
path: '/home',
component: () => import('../components/Home'),
children:
[
{
path:news,
component:HomeNews
},
{
path:message,
component:HomeMessage
}
]
}
]
然后在首页Home中增加<router-view/>以及<router-link>
<rounter-view>是子组件的占位
<router-link>来触发子组件什么时候出现，注意要添加完整路径
如
<router-link to="/home/news"></router-link>
9.导航守卫
实现需求：浏览器标签显示跳转过去的页面的标题
在创建路由的时候设置以下方法
const router = new Router({
routes: routes
.....其它内容
})
//前置守卫
router.beforeEach((to, from ,next) =>{
//to代表跳转过去的地方，类型为Route
//from代表从哪里跳转，类型为Route
//需要调用下next()否则路由不会进入下一个钩子，也就是不会跳转
document.title=to.matched[0].meta.title; //matched[0]取第一个，需要配置meta中的标题
next();
})
配置meta例子如下
{
path:'/home',
component:Home,
meta:{
title:首页
}
}
当页面较多时，以上的跳转不好维护，更好的方法是通过导航守卫来实现
//后置守卫，如果是后置守卫，不需要再调用next()函数了
router.afterEach((to,from)=>{
})
以上的为全局守卫，此外还有路由独享守卫
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// 这些守卫与全局前置守卫的方法参数是一样的。
}
}
]
})
此外还有组件内守卫
详细介绍：[https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB](https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB)
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
10.keep-alive遇见vue-router
路由之间跳转后没有保存状态，导致再次跳转还是会原来到原来的状态。
keep-alive是vue的一个组件，用它包裹后的组件可以保留状态。
router-view是vue-router的一个组件，使用keep-alive包裹router-view后，所有组件匹配到的视图组件会缓存下来。
//使用<keep-alive>包裹router-view
<keep-alive>
<router-veiw/>
</keep-alive>
....
beforeRouteLeave(to,from next){
//路由跳转前记录当前的路由
this.path = this.$route.path;
next();
}
activied(){
//再次处于活跃状态跳转到上次记录的路由
this.$router.push(this.path);
//path为data中的属性
}
<keep-alive>的include和exclude属性用于包含、排除组件。
不希望User.vue不被保存状态，则
<keep-alive exclude="user"> //user是User.vue的name
<router-veiw/>
</keep-alive>
<keep-alive exclude="user,home"> //排除两个
<router-veiw/>
</keep-alive>
