Vue中Router路由的使用备忘

短命女 2024-03-30 16:12 68阅读 0赞

#### 文章目录 ####

*  Vue中Router路由的使用备忘
 *   *  1. vue-router的基本使用
     *   *  1-1 安装vue-router
         *  1-2 src目录下，新建roouter/index.js路由文件
         *  1-3 导入并挂载路由、声明路由链接和占位符
         *  1-4 实例
         *   *  1-4-1 router/index.js
             *  1-4-2 main.js
             *  1-4-3 App.vue
     *  2. 路由重定向 -- redirect配置项
     *  3. 嵌套路由 -- children配置项
     *   *  3-1 router/index.js中配置children
         *  3-2 Vue页面中使用
     *  4. 路由参数传递
     *   *  4-1 query
         *  4-2 params
         *  4-3 通过props方式传参
         *   *  4-3-1 props值为对象 -- 很少使用，参数值固定了
             *  4-3-2 props值为布尔值 -- params有效，query无效
             *  4-3-3 props值为函数 -- 同时支持params和query参数
         *  4-4 meta配置项的使用 -- 给路由自定义配置数据
         *   *  4-4-1 示例
             *  4-4-2 使用实例： 全局导航守卫中检查元字段
     *  5. 不用<route-link>，代码实现路由导航(编程式路由导航)
     *  6. 路由导航守卫
     *   *  6-1 全局路由守卫 router/index.js
         *  6-2 路由独享守卫
         *  6-3 组件内路由守卫
         *  6-4 完整的导航解析流程

## Vue中Router路由的使用备忘 ##

### 1. vue-router的基本使用 ###

#### 1-1 安装vue-router ####

// 这里注意安装的版本，默认安装最新版，类似Vuex的安装
    //	Vue2安装vue-router3版本， Vue3安装vue-router4版本，别搞错了哦
    npm i vue-router@3.5.2 -S

#### 1-2 src目录下，新建roouter/index.js路由文件 ####

import Vue from 'vue'
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)) //调用Vue.use()函数，把VueRoouter安装为Vue的插件
    coonst router=new VueRouter(
    {
        
    	// 路由配置
        routes:[
            {
        
                path:'/home',
                component:'Home'
            }
        ]
    }) //创建路由的示例对象
    export default router //向外共享路由的实例对象

#### 1-3 导入并挂载路由、声明路由链接和占位符 ####

<router-link></router-link>
    
    
    <router-view><router-view>

#### 1-4 实例 ####

##### 1-4-1 router/index.js #####

import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '@/components/Home.vue'
    import About from '@/components/About.vue'
    import Article from '@/components/Article.vue'
    
    Vue.use(VueRouter)
    const router=new VueRouter({
        
      routes:[
        {
        path:'/home',component:Home},
        {
        path:'/about',component:About},
        {
        path:'/article',component:Article}
        ]
      })
    export default router

##### 1-4-2 main.js #####

import Vue from "vue"
    import App from "./App.vue"
    // 导入路由
    import router from "@/router/index.js"
    
    Vue.config.productionTip = false
    
    new Vue({
        
    	render: h => h(App),
    	router  // 使用路由
    }).$mount("app")

##### 1-4-3 App.vue #####

<div>
      <h1>路由的初步使用</h1>
      <div>
        <router-link to="/home">首页</router-link>
        <router-link to="/about">关于</router-link>
        <router-link to="/article">文章</router-link>
      </div>
      <hr />
      <router-view></router-view>
    </div>

### 2. 路由重定向 – redirect配置项 ###

// 路由重定向：	用户在访问地址A的时候,
    //				强制用户调转到地址C，从而展示特定的组件页面
    
    通过路由规则的redirect属性，制定一个新的路由地址可以实现路由重定向。
    Vue.use(VueRouter)
    //在routees数组中，声明路由的匹配规则
    const router=new VueRouter({
        
      routes:[
        {
        path:'/',redirect:'/home'},//当用户访问/的时候，通过redirect属性跳转到/home对应的路由规则
        {
        path:'/home',component:Home},
        {
        path:'/about',component:About},
        {
        path:'/article',component:Article}
      ]
    })
    export default router

### 3. 嵌套路由 – children配置项 ###

#### 3-1 router/index.js中配置children ####

//	使用子路由时，只需要在路由规则配置中找到父组件配置节点，
    //		增加children属性即可配置子路由，示例：
    Vue.use(VueRouter)
    //在routees数组中，声明路由的匹配规则
    const router=new VueRouter({
        
        routes:[
            {
        path:'/',redirect:'/home'},//当用户访问/的时候，通过redirect属性跳转到/home对应的路由规则
            {
        path:'/yangwei',redirect:'/article'},
            {
        path:'/home',component:Home},
            {
        path:'/about',component:About,children:[  //配置子路由
                    {
        path:'tab1',component:Tab1},
                    {
        path:'tab2',component:Tab2}
                    ]},
            {
        path:'/article',component:Article}
        ]
    })

#### 3-2 Vue页面中使用 ####

<h2>这是子路由</h2>
        <router-link to="/about/tab1">Tab1</router-link>  
        <router-link to="/about/tab2">Tab2</router-link>
        
        <router-view></router-view>

### 4. 路由参数传递 ###

#### 4-1 query ####

// 1. 路由规则配置， 
    {
        name:"articleName",path:'/article',component:Article}
    
    // 2. 发送请求参数， id,title从data数据中取值
    
    <route-link :to="`/articls?articleId=${id}&title=${title}`"></route-link>
    
    <route-link :to="{
        
    	path:'/article',
    	// name: "articleName"  // 路由中配置的name属性值，当为params时，必须使用name配置
    	query:{
        
    		articleId:id,
    		title:title
    	},
    	// params:{  // 该配置项需要有name的配置项，使用path跳转无效，搞不懂这Sb设计
    	// 	......
    	// }
    }">	
    </route-link>
    // 2-3 不使用<route-link>标签触发路由跳转
    //		push: 不替换历史路径跳转  replace： 替换历史路径跳转
    this.$router.push({
        
    	// 同<route-link>中to的对象写法
    })
    this.$router.replace({
        
    	// 同<route-link>中to的对象写法
    })
    
    // 3. 页面中获取传过来的参数
    <template>
      <div class="root">
        
        这是文章页面,query 参数值为：{
        {
        this.$route.query.articleId}}
      </div>
    </template>

#### 4-2 params ####

// 发送params的请求
    
    <route-link :to="/article/666/标题名"></route-link>
    
    <route-link :to="{
        
    	// path:'/article',
    	name: "articleName"  // 路由中配置的name属性值，当为params时，必须使用name配置
    	// query:{
        
    	// 	...
    	// },
    	params:{
          // 该配置项需要有name的配置项，使用path跳转无效，搞不懂这Sb设计
    		articleId:id,
    		title:title
    	}
    }">	
    </route-link>
    // 4. 不使用<route-link>标签触发路由跳转
    //		push: 不替换历史路径跳转  replace： 替换历史路径跳转
    this.$router.push({
        
    	// 同<route-link>中to的对象写法
    })
    this.$router.replace({
        
    	// 同<route-link>中to的对象写法
    })
    
    // 路由中规则配置， :articleId、:title为路径参数
    {
        path:'/article/:articleId/:title',component:Article}
    
    // 页面中获取传过来的参数
    <template>
      <div class="root">
        这是文章页面,参数值为：{
        {
        this.$route.params.articleId}}
        
      </div>
    </template>

#### 4-3 通过props方式传参 ####

[参考链接][Link 1]

##### 4-3-1 props值为对象 – 很少使用，参数值固定了 #####

children: [
        {
        
            name: 'xiangqing',
            path:'detail',
            component: Detail,
            // props对象中所有的key-value的组合最终都会通过props传给Detail组件
            props:{
        
                id: '888',
                title: '你好啊'
            }
        }
    ]
    
    // 在Detail组件中使用props接收传递来的数据
    <template>
      <div>
        <ul>
            <li>接收的id为{
        {
        id}}</li>
            <li>接收的title为{
        {
        title}}</li>
        </ul>
      </div>
    </template>
     
    <script>
    export default {
        
        name: 'Detail',
        // 接收路由组件传递来的数据 ，值在路由中写死了
        props: ['id', 'title']
    }
    </script>

##### 4-3-2 props值为布尔值 – params有效，query无效 #####

{
        
        name: 'xiangqing',
        path:'detail/:id/:title', //使用占位符声明接收params参数
        component: Detail,
        // props值为布尔值，布尔值为true时，
        //		则把路由收到的所有params参数通过props传给Detail组件
        //		不适应与query类型的参数，真是Sb的设计
        props: true
    }
    
    // 传递params参数实例
    <li v-for="item in list" :key="item.id">
      <router-link :to="{
        
      	// 传递params时，必须使用name，path无效，再次吐槽Sb的设计
        name: 'xiangqing',  
        params: {
        
          id: item.id,
          title: item.title
        }
      }">{
        {
         item.title }}</router-link>
    </li>
    
    // Vue页面中使用
    <template>
      <div>
        <ul>
            <li>接收的id为{
        {
        id}}</li>
            <li>接收的title为{
        {
        title}}</li>
        </ul>
      </div>
    </template>
     
    <script>
    export default {
        
        name: 'Detail',
        // 接收组件传递来的数据
        props: ['id', 'title']
    }
    </script>

##### 4-3-3 props值为函数 – 同时支持params和query参数 #####

{
        
        name: 'xiangqing',
        path:'detail/:id/:title', //使用占位符声明接收params参数
        component: Detail,
        // 第三种写法：props值为函数，
        //		该函数返回的对象中每一组key-value都会通过props传给Detail组件
        props($route) {
        
            return {
        
            	// 可以同时支持query和params请求过来的参数
                id: $route.params.id,
                title: $route.params.title,
                queryId: $route.query.id
                queryTitle: $toute.query.title
                // 还可以返回一些别的数据
                a: 1,
                b: "hello"
            }
        }
    }
    
    // Vue页面组件中使用
    <template>
      <div>
        <ul>
            <li>接收的id为{
        {
        id}}</li>
            <li>接收的title为{
        {
        title}}</li>
            {
        {
        a}}-----{
        {
        b}}
        </ul>
      </div>
    </template>
     
    <script>
    export default {
        
        name: 'Detail',
        // 接收组件传递的参数
        props: ['id', 'title', 'queryId','queryTitle','a', 'b']
    }
    </script>

#### 4-4 meta配置项的使用 – 给路由自定义配置数据 ####

##### 4-4-1 示例 #####

const router = new VueRouter({
        
      routes: [
        {
        
          path: '/foo',
          component: Foo,
          children: [
            {
        
              path: 'bar',
              component: Bar,
              // meta为元字段，值为对象，内容可自定义，用于对指定路由自定义一些数据
              meta: {
         requiresAuth: true, testId: 100 }
            }
          ]
        }
      ]
    })

##### 4-4-2 使用实例： 全局导航守卫中检查元字段 #####

// 路由全局前置守卫中使用到了  路由的meta自定义的requiresAuth，实现路由权限的控制
    router.beforeEach((to, from, next) => {
        
      if (to.matched.some(record => record.meta.requiresAuth)) {
        
        if (!auth.loggedIn()) {
        
          next({
        
            path: '/login',
            query: {
         redirect: to.fullPath }
          })
        } else {
        
          next()
        }
      } else {
        
        next() // 确保一定要调用 next()
      }
    })

### 5. 不用，代码实现路由导航(编程式路由导航) ###

//	路由的跳转： push和replace ，参数同<router-link>标签，路径地址或对象式配置
    //跳转到指定的hash地址，并在历史记录中添加一条记录
    （1）	this.$router.push('url完整请求地址') 
    		this.$router.push('{path:xx,name:xx,query:{},params{}}')  
    //跳转到指定的hash地址，并且提换当页面在浏览历史中的记录
    （2）	this.$router.replace('url完整请求地址')
    		this.$router.replace('{path:xx,name:xx,query:{},params{}}')
    
    // 路由的历史跳转 go back forward
    //在浏览历史中前进或后退n步
    （3）this.$router.go(数值n) 
    // 浏览器历史后退一步
    （4）this.$router.back()
    // 浏览器历史前进一步
    （5）this.$router.forward()

### 6. 路由导航守卫 ###

#### 6-1 全局路由守卫 router/index.js ####

// beforeEach(to, from, next) 		全局前置守卫，路由跳转前触发
    // beforeResolve(to, from, next) 	全局解析守卫 在所有组件内守卫和异步路由组件被解析之后触发
    // afterEach(to, from) 				全局后置守卫，路由跳转完成后触发
    const router = new VueRouter({
        ...})
    
    // 全局前置守卫
    router.beforeEach(function(to,from,next){
        
        //to是将要访问的路由信息对象
        //from是将要离开的路由信息对象
        //next是一个函数，调用next()表示放行，允许这次路由导航
    })
    
    // 全局后置守卫
    router.afterEach((to,from) => {
        
    	//to是将要访问的路由信息对象
        //from是将要离开的路由信息对象
    })

#### 6-2 路由独享守卫 ####

const router = new VueRouter({
        
      routes: [
        {
        
          path: '/foo',
          component: Foo,
          // 配置该路由路径/foo的独享守卫
          beforeEnter: (to, from, next) => {
        
            // ...
          }
        }
      ]
    })

#### 6-3 组件内路由守卫 ####

beforeRouteEnter(to,from,next) 		// 在组件生命周期beforeCreate阶段触发
    beforeRouteUpdadte(to,from,next) 	// 当前路由改变时触发
    beforeRouteLeave(to,from,next) 		// 导航离开该组件的对应路由时触发

#### 6-4 完整的导航解析流程 ####

1.触发进入其它路由
    2.调用要离开路由的			组件内守卫beforeRouteLeave
    3.调用						全局前置守卫beforeEach
    4.调用组件里调用 			组件内守卫beforeRouteUpdate
    5.路由配置里的单条路由调用	路由独享守卫beforeEnter
    6.解析异步路由组件
    7.在将要进入的路由组件中调用 	组件内守卫beforeRouteEnter
    8.调用						全局解析守卫beforeResolve
    9.导航被确认
    10.调用						全局后置守卫afterEach
    11.触发 DOM 更新mounted
    12.执行beforeRouteEnter守卫中传给next的回调函数

[Link 1]: https://blog.csdn.net/qq_54527592/article/details/119703120