vue-Router安装过程及原理详细

npm install vue-router --save

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter) //引用 vue-router 插件

//配置路由与组件之间的关系
const route=[
  {
      path: '/',
    // 当访问 '/'的时候 路由重定向 到新的地址 '/home'
    redirect: '/home',
  },
  {
     path: '/home',
     component: home,
   },
   {
     path: '/login',
     component: login,
    },
]
 

const router = new VueRouter({
  mode: "history", //设置模式
  routes
});
 

let app = new Vue({
 el:'#app',
  data:{},
  // 挂载到vue上面
  router,
})
 

<!-- 添加路由 -->
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>

<!-- 展示路由内容 -->
<router-view />

<router-link to="/home">首页</router-link>
// 渲染成
<a href="#/home" rel="external nofollow" >首页</a>

const router = new VueRouter({
 mode:'history'
})

<router-link to="/home" tag="button">首页</router-link>

<router-link to="/home" replace>首页</router-link>

<a href="#/" rel="external nofollow"  
 aria-current="page" 
 class="router-link-exact-active router-link-active">
 首页
</a>

<router-link to="/" active-class="active">首页</router-link>
// router-link-active 类名会被替换成 active

const router=new VueRouter({
 routes,
 mode: 'hash',
  linkActiveClasss: 'active' //统一设置类名
})

// 简单写法
<router-link to="/">首页</router-link>

//使用动态的path
<router-link :to="{ path : '/' }"></router-link>
可以使用path 也可以使用name

//带传参跳转1
<router-link :to="
{ name:'home', params:{ id:'123' , name:'gq' }}
">
</router-link>

//带传参跳转
<router-link :to="
{ path:'/', query:{ id:'123' , name:'gq' }}
">
</router-link>
 

// 简单写法
this.$router.push({ path:'/' })
// push 与history.pushState 一样

//带参跳转
this.$router.push({
 name: 'home' , params: { id:'123' , name:'gq' }
})

//带多种参数
this.$router.push({
 name: 'home' , 
 params: { id:'123' , name:'gq' },
 query: { plan:'private' }
})

routers:[
 {
     path: '/user/:id',
   component:()=>{ import('../views/user.vue') }
 }
]
 

<router-link to="/user/123"> user:123 </router-link>
<router-link to="/user/456"> user:456 </router-link>

 
//动态设置后边id值
<router-link :to=" '/user/'+id "> user:{{ id }} </router-link>

this.$route.params.id 

<router-link to="/user?id=123"></router-link>

//取值时
this.$route.query.id

//直接引用的
import Home from './component/home'
const routes = [
 {
  path:'/home',
  component:Home
 }
]

//懒加载
const routes = [
 {
  path:'/home',
  component:()=>{ import('./component/home') }
 }
]

{
 path: "/body",
 component: ()=> import( "../components/bodyLayout.vue"),,
 children:[
  {
   path: "manager",
   component: ()=> import( "../components/blankView.vue"),
   children:[
    {
      path: "user",
      component: ()=> import( "../views/manager/user.vue")
     },
    ]
   },
  ]
}

{
 path: "/user",
 component: ()=> import( "../views/manager/user.vue")
}
//此时访问路由就变成了 " /user "
 

// 在对应的组件内添加
created(){
 document.title="测试"
}

访问该组件时，标题自动切换为 ”测试“

router.beforeEach((to,from,next)=>{
// 路由从 from 跳转到 to 
// 我们只需要在路由上增加一个 name属性就可以了
 document.title = from.name
 next()
})

router.afterEach((to,from)=>{
 console.log('后置守卫')
})

{
 path: "/test",
 name: "测试",
 component: ()=> import( "../views/manager/test.vue"),
 beforeEnter:(to,from,next)=>{
  console.log('test进入前')
  next()
 }
}

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`
  }
}

<div id="app">
 <router-link to="/home">home</router-link>
 <router-link to="/login">login</router-link>
 <keep-alive>
  <router-view></router-view>
 </keep-alive>
</div>

activated(){
 console.log('activated')
},
deactivated(){
 console.log("deactivated")
}

<keep-alive include="test">
 <router-view></router-view>
</keep-alive>

//test组件 添加name属性
<template>
  <div>
    test
  </div>
</template>
<script>
 export default {
  name:'test'
 }
<script>

<keep-alive include="test,user">
 <router-view></router-view>
</keep-alive>
 

<keep-alive exclude="test,user">
 <router-view></router-view>
</keep-alive>