Vue相关学习笔记-路由

配置框架

#安装插件
Vue.use(VueRouter);
#创建对象，配置路由
var routes = [
]
#this.$router指的就是这个路由实例
#this.$route指当前活跃的路由
const router = new VueRouter({
  routes,
  mode: history, //设置url为history模式
  linkActiveClass:'active' //设置router-link被点击时增加的class默认值
})
#导出对象，然后在Vue实例中挂载
export default router;

路由具体配置

创建组件

创建Home.vue,About.vue。

配置路由映射

import Home from "../Home.vue"
import About from "../About.vue"
var routes = [
  {
   #路由的默认值
    path:"/",
    redirect:"/home"
  },
  {
    path:"/home",
    component:Home
  },
  {
    path:"/about",
    component:About
  }
]

使用路由

通过标签

#router-link最终会被渲染成a标签
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
#为即将显示的组件占位
<router-view></router-view>

其中，router-link还有其他属性。

• tag 改变router-link最终渲染的目标，可以设置为button等。
• replace 增加该属性后，无法通过返回回到上一步，将push改为replace
• active-class router-link被点击后会自动在class上增加值，可以通过该属性设置值的名字。

通过代码

可以不通过router-link来使用路由，而是通过代码跳转路由。

this.$router.push('/home');
#无法返回的方法
this.$router.replace('/home')

路由的懒加载

其JS文件打包时会根据路由分别打包，而不是打包到同一个文件中，且在真正跳转到某个路由时才会加载相应文件。

const User = ()=>import('../components/User')
var routes = [
  {
    path:"/user",
    component:User
  }
]

嵌套路由

创建子组件，并在路由映射中配置对应子路由

var routes = [
  {
    path:"/home",
    component:Home,
    children:[
      {
        path:'news',
        component:HomeNews
      },{
        path:'message',
        component:HomeMessage
      }
    ]
  }
]

在组件内部使用标签

#在Home组件中
<router-link to="/home/news">首页</router-link>
<router-link to="/home/message">关于</router-link>
<router-view></router-view>

参数传递

pramas方式

动态路由
路径后需拼接动态数据

var routes = [
  {
    path:"/user:abc",
    component:User
  }
]
#userId为实例中data
<router-link :to="'/user/'+userId">用户</router-link>
#可以在User组件中拿到url传过来的数据
this.$route.params.abc

query方式

var routes = [
  {
    path:"/home",
    component:Home
  }
]
<router-link :to="{path:'/user',query:{name:why,age:18}}">用户</router-link>
#在User组件的HTML代码中使用
$route.query.name

通过代码跳转路由时

<button @click="btnClick"></button>

btnClick(){
  this.$router.push({
    path:'/user',
    query:{
      name:'why',
      age:18
    }
  })
}
#在User组件的HTML代码中使用 （使用方法与上面相同）
$route.query.name

导航守卫

监听跳转的过程。

全局守卫

不用在每个路由中修改代码，方便维护

var routes = [
  {
    path:"/home",
    component:Home,
    meta:{
      title:"首页"
    }
  }
]
#跳转时修改相应的标题
#前置钩子 跳转前回调
router.beforeEach((to,from,next)=>{
  document.title = to.matched[0].meta.title;
  next(); //next('/') next(false)可以控制路由跳转到指定页面或者中断跳转
})
#后置钩子 跳转后回调 （不用主动地调用 next()）
router.afterEach((to,from)=>{
  //...
})

路由独享的守卫

var routes = [
  {
    path:"/home",
    component:Home,
    beforeEnter:(to,from,next)=>{
      //...
    }
  }
]

组件内的守卫

const foo = {
  template:`...`,
  beforeRouteEnter(to,from,next){
  
  },
  beforeRouteUpdate(to,from,next){
  
  },
  beforeRouteLeave(to,from,next){
  
  },
}

keep-alive

vue内置的组件，可以使被包含的组件保持状态，避免重新渲染。
activated,deactivated函数只有在keep-alive保持状态时才有用。

<keep-alive>
  <router-view />
</keep-alive>

属性

include

exclude

<keep-alive exclude = "User,Home">
  <router-view />
</keep-alive>