vue-router

安装

	cnpm i vue-router@3 
	//vue2安装vue-router@3 

配置main.js文件

	import VueRouter from 'vue-router'
	import router from './router'
	
	Vue.use(VueRouter)
	
	new Vue({
	router
	}).$mount('#app')

src/router/index.js文件

import VueRouter from 'vue-router'

import RouterQuery from '../view/test9/RouterQuery'  //组件路径
import RouterParams from '../view/test9/RouterParams' //组件路径

export default new VueRouter({
   routes:[
       {//一级路由
           name：'about'
           path: '/params',
           component: RouterParams
           children:[
               {//二级路由路径没有 /
                   path:'params1',
                   component: Params1,
                   children: [
                        {//三级路由
                            name:'msg',
                            path: 'msg',
                            component: Msg,
                        }
                    ]
               },
               {
                   path:'params2',
                   component: Params2,
               }
           ]
       },
       {
           path: '/query',
           component: RouterQuery
       }
   ]   
}) 

使用

<router-link to='' active-class='active'></router-link>
//to后面跟路径
//a标签属性active点击背景高亮，vue-router用active-class='active'
<router-view/>
//指定组件呈现位置

query传参

 <!-- 携带query参数，to的字符串写法 ,多组key：value用&连接-->
 <router-link :to="`/params/params1/msg?name=${item.name}&skill=${item.skill}`">
 //双引号里面时模板字符串，esc按键下
 
 <!-- 携带query参数，to的对象写法 -->
 <router-link :to="{
   path:'/params/params1/msg',
   query:{
     name:item.name,
     skill:item.skill
   }
 }"><router-link>

获取参数

<li>{{$route.query.name}}</li>
//组件实例对象的的$route存有数据

命名路由，简化代码

 <router-link :to="{
   path:'/params/params1/msg',//此处替换  name:'msg',
   query:{
     name:item.name,
     skill:item.skill
   }
 }"><router-link>

prams传参

{
  name:'msg',
  path: 'msg/:name/:skill',  //使用占位符接收
  component: Msg,
}//路由配置

<router-link :to="`/params/params1/msg/${item.name}/${item.skill}`">
<router-link :to="{
			  name:'msg',//params不能用path
              params:{
                name:item.name,
                skill:item.skill
              }
            }"></router-link>      

获取参数

<li>{{$route.prams.name}}</li>

获取参数简化

路由中设置
组件通过props:['name','skill']接收
//props值为对象，,数据固定
  props:{name:1,skill:'hello'},
//只能传递params参数
  props:true,
//params和query都可以  
	props($route){
	    return{
	        name:$route.query.name,
	        skill:$route.query.skill
	    }
	}
------------------
解构赋值连续使用
	props({query：{name,skill}}){
	    return{
	        name,
	        skill
	    }
	}

router-link 的replace属性

<router-link replace></router-link>

replace='true'简写replace
router-link默认push模式，网页可以前进后退，replace模式只能前进

编程式导航

this.$router.push({
		  name:'xxx',
          params:{
                name:xxx,
                skill:xxx
          }
})//跳转可以回退
this.$router.replace({
		  name:'xxx',
          params:{
                name:xxx,
                skill:xxx
          }
})//跳转不可以回退
this.$router.go(x)//x正负数字表示前进或后退几步操作
this.$router.back()//后退
this.$router.forward()//前进

缓存路由组件

<keep-alive include='组件名'>
	<router-view/>//展示内容
</keep-alive>
//保持组件挂载，数据不被replace操作销毁
//不写include展示的都被挂载

<keep-alive :include="['组件名','']">
	<router-view/>//展示内容
</keep-alive>//缓存多个组件

路由组件生命周期钩子

activated(){} //使用是调用
deactivated(){} //不使用时调用
//另一个钩子函数this$nextTick()改变数据，vue操作完页面再执行

路由配置文件中路由守卫

//全局前置路由守卫，路由切换之前调用,初始化调用
router.beforeEach((to,from,next)=>{
    next()
})
//to去哪，from从哪来，next是否执行下一步
//to.path去的路由地址
//to.name去的路由名称
//to.meta.isAuth  给路由加一个meta配置，isAuth是自定义判断逻辑

//全局后置路由守卫，路由切换之前调用,初始后调用
router.afterEach((to,from)=>{
	
})

//独享路由守卫，没有后置
{
  	name:'xxx'
  	path:'/xxx',
    component: xxx,
    beforeEnter: (to, from, next)=>{
        next()
    }
}

组件中路由守卫

//通过路由规则，进入该组件时被调用
beforeRouteInter(to,from,next)=>{
    next()
})
//通过路由规则，离开该组件时被调用
beforeRouteLeave(to,from,next)=>{
    next()
})//这两个是写在组件中的

histroy模式和hash模式
对一个url来说#及其后面内容就是hash值，hash不会带给服务器

const router = new VueRouter({
	mode:'history'//地址栏没有#
})//默认hash,部署项目#后面有信息不会触发网络请求

处理history模式404问题，

npm insatll --save connect-history-api-fallback//安装到node上

const express = require('express')
const history = require('connect-history-api-fallback')

const app = express()
app.use(history())//使用，要在静态模板之前
app.use(express.static(__dirname+'/static'))

app.get('/路径',(req,res)=>{})//处理请求

app.listen(3000,(err)=>{})//3000是自定义端口号，err是错误信息