vue.js 路由教程 vue的路由使用步骤

转载

colddawn 2023-05-22 14:59:57

一、Vue中的vue-router(路由)的使用
基本使用
一个路由（route）就是一组映射关系（key-value）,多个路由需要路由器（router）进行管理
前端路由：key是路径，value是组件
安装vue-router:npm i vue-router
应用插件：Vue.use（VueRouter）

二、修改main.js文件
//引入Vue
import Vue from 'vue'
//引入App
import App from './APP.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'

//应用插件
Vue.use（VueRouter）
//创建vm
new Vue({
   el:'#app',
    render:h=>h(App)，
	router:router
})

三、创建router/index.js文件
//该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '.../components/About'
import Home from '../components/Home'

//创建并暴露一个路由器
export default new Vuerouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
components:Home
}
]
})

四、编写App.vue文件

五、创建About.vue
六、创建Home.vue

七、多级路由
创建childern配置项
//创建并暴露一个路由器
export 的发露天new VueRouter（{
routes:[
{
path:'/about',
components:About
},
{
path:'/home',
components:Home,
children:[
{
path:'/home',
childern:[
{
path:'news',
component:'News',
},
{
path:'message',
Component:Message,
}
]
}
]
}
]
}）
路由跳转要写完整的路径
News

八、路由的query参数
参数传递
//跳转并携带params参数，to的字符串写法
<router-link: to="/home/message/detail/">跳转

//跳转并携带params参数，to的对象写法
 
<router-link
:to="{
    name:'machoul',
	params:{
	id：666，
	title:'你好'
	}
}"
>跳转</router-link>

//特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用nam配置

参数接受
$router.params.id
$router.params.title

九、路由的props配置
作用：让路由组件更加方便的接收到参数，配置在路由定义中
如果props值为对象，该对象中所有的key-value的组合最终都会通过props传给Deatail组件
{
name:'machouul',
path:'detail/:id',
component:Detail,
props：{a:900}
}

props值为布尔值，布尔值为true,则把路由收到的所有params参数通过props传给Deatail组件
{
name:'machoul',
path:'detail/:id',
component:Detail,
props:true
}

props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
{
name:'machoul',
path:'detail/:id',
component:Deatail,
props(route){
return{
id:route.query.id
title:route.query.title
}
}
}
十、router-link的replace属性
作用：控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录有两种写入方式，分别为push和replace,push是追加的历史记录，replace是替换当前记录，路由跳转时候默认为push
如何开启replace模式，News

十一、编程式路由导航
1.作用：不借助实现路由跳转，让路由跳转更加灵活

push方法
this.$router.push（{
name:'machoul',
params:{
id：xxx,
title：xxx
}
}）

replace方法
this.$router.replace({
name：'machoul',
params:{
id：xxx，
title:xxx
}
})

其他
   this.$router.forward（）//前进
   this.$router.back()//后退
   this.$router.go（）//可前进也可以后退

十二、缓存路由组件
作用:让不展示的路由组件保持挂在，不被销毁

十二、路由守卫
全局路由守卫
对路由进行全局权限控制
//全局前置守卫：初始化时执行，每次路由切换前执行
router.beforeEach(to,from,next)=>>{
console.log('beforeEach，to,from')
if（to.meta.isAuth）{
//判断当前路由是否需要进行权限控制
if(true){//权限控制的具体规则
next()//放行
}else{
alert('暂无权限查看')
}
}else{
next()//放行
}
}）

//全局后置守卫：初始化时执行，每次路由切换后执行
	  router.afterEach((to,from)=>{
	  console.log（'afterEach',to,from）
	  if(to,meta.title){
	  document.title=to.meta.title//修改网页的title
	  }else{
	  document.title='vue_title'//修改网页的tiltle
	  }else{
	  document.title='vue_test'
	  }
	  })

十四、
独享路由守卫
对某一个路由进行单独的设置

点击查看代码

const router =  new VueRouter({
  routes:[
    {
      name:'zhuye',
      path:'/home',
      component:Home,
      meta:{title:'主页'},
      children:[
        {
          name:'xinwen',
          path:'news',
          component:News,
          meta:{isAuth:true,title:'新闻'},
          beforeEnter: (to, from, next) => {
            console.log('独享路由守卫',to,from)
            if(to.meta.isAuth){ //判断是否需要鉴权
              if(true){
                next()
              }else{
                alert('无权限查看！')
              }
            }else{
              next()
            }
          }
        }
      ]
    }
  ]
})

十五、组件内路由守卫在组件内对路由进行配置点击查看代码

<template>
  <h2>
    this is home page
  </h2>
</template>

<script>
export default {
  name: 'Home',
  //通过路由规则，进入该组件时被调用
  beforeRouteEnter (to, from, next) {
    console.log('home--beforeRouteEnter',to,from)
    if(to.meta.isAuth){ //判断是否需要鉴权
      if(true){
        next()
      }else{
        alert('无权限查看！')
      }
    }else{
      next()
    }
  },

  //通过路由规则，离开该组件时被调用
  beforeRouteLeave (to, from, next) {
    console.log('home--beforeRouteLeave',to,from)
    next()
  }
}
</script>

十六、路由的两个猴子函数作用：路由组件所独有的两个钩子，用于捕获路由组件激活状态集体名字 activate的，路由组件别激活时触发 deactivated路由组件失活时触发

export default{
name:'Home',
actived(){
console.log('home is actived')
},
deactivated(){
conosle.log('home is deactivated')
}
}