路由和路由守卫

标签：name title component 守卫 router path 路由

路由

1.路由就是一组key-value的对应关系（key为路径，value可能是function或component）
2.多个路由，需要经过路由器管理

SPA(single page web application)应用

单页面Web应用：整个页面只有一个完整的页面
点击页面中的导航链接不会刷新页面，只会做页面的局部更新
数据需要通过ajax请求获取

路由切换实例
App.vue

<template>
    <!-- vue中借助router-link标签实现页面的路由跳转 -->
    <router-link to="/home">home</router-link><br>
    <router-link to="/about">about</router-link>
    
<div>
    vue中指定组件呈现位置
    <router-view></router-view>
</div>
        
</template>
<script setup>
</script>

router文件夹下的index文件

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/home',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

about页面

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>

home页面

<script>
// import TheWelcome from '../components/TheWelcome.vue'
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    // 在其他方法或是生命周期中也可以调用方法
    this.increment()
  }
}

</script>

<template>
  <button @click="increment">{{ count }}</button>

</template>

路由的注意点
1.路由组件通常存放在pages（或views）文件夹中，一般组件通常存放在components文件夹
2.通过切换，“隐藏”了路由组件，默认是被销毁掉的，需要的时候再去挂载
3.每个组件都有自己的$route属性，里面存储着自己的路由信息
4.整个应用只有一个router，可以通过组件的$router属性获取到

嵌套路由（多级路由）
在home组件中增加子路由页面

<script>
</script>
<template>
  <h2>Home组件内容</h2>
  <router-link to="/home/news">news</router-link>&nbsp;
  <router-link to="/home/messages">messages</router-link>
  <router-view></router-view>
</template>

home路由配置中通过children增加子路由的配置

{
      path: '/home',
      name: 'home',
      component: HomeView,
      children: [
        {
          path: 'news',
          name:'news',
          component:News,
        },
        {
          path: 'messages',
          name:'messages',
          component:Messages,
        }
      ]
    },

news

<template>
    <div>
        <ul>
            <li>张震岳</li>
            <li>周华健</li>
            
        </ul>
    </div>
</template>

messages

<template>
    <div>
        <ul>
            <li>刘德华</li>
            <li>张学友</li>
            <li>郭富城</li>
            <li>黎明</li>
        </ul>
    </div>
</template>

路由传参query方式

<template>
    <div>
        <ul>
            <li v-for="m in messagesList" :key="m.id">
                <router-link 
                :to="{path:'/home/messages/detail',
                query:{id:m.id,title:m.title}}">
                {{m.title}}</router-link>
            </li>
        </ul>
    </div>
    <router-view></router-view>
</template>
<script setup>
import {reactive} from 'vue'
let messagesList=reactive([
    {id:'001',title:'title001'},
    {id:'002',title:'title002'},
    {id:'003',title:'title003'}
])
</script>

路由接受参数

<template>
    <div>
        <h2>详情页</h2>
        <ul>
            <li>消息编号{{route.query.id}}</li>
            <li>消息标题{{route.query.title}}</li>
        </ul>
    </div>
</template>
<script setup>
import {useRoute} from 'vue-router'
const route=useRoute()
console.log(route);
</script>

命名路由：可以简化路由跳转
路径过长时通过增加name属性，可以简化路由

{
      path: '/home',
      name: 'home',
      component: HomeView,
      children: [
        {
          path: 'news',
          name:'news',
          component:News,
        },
        {
          path: 'messages',
          name:'messages',
          component: Messages,
          children: [
            {
              path: 'detail',
              name: 'detail',
              component:Detail
              
            }
          ]
        }
      ]
    },

            <li v-for="m in messagesList" :key="m.id">
                <router-link 
                :to="{name:'detail',
                query:{id:m.id,title:m.title}}">
                {{m.title}}</router-link>
            </li>

路由传参params
注意点：当使用params传参时，若使用to的对象写法，则不能使用path配置项，必须使用命名路由也就是name
传参

<template>
    <div>
        <ul>
            <li v-for="m in messagesList" :key="m.id">
                <router-link 
                :to="{name:'detail',
                params:{id:m.id,title:m.title}}">
                {{m.title}}</router-link>
            </li>
        </ul>
    </div>
    <router-view></router-view>
</template>

{
      path: '/home',
      name: 'home',
      component: HomeView,
      children: [
        {
          path: 'news',
          name:'news',
          component:News,
        },
        {
          path: 'messages',
          name:'messages',
          component: Messages,
          children: [
            {
              path: 'detail/:id/:title',
              name: 'detail',
              component:Detail
              
            }
          ]
        }
      ]
    },

接受参数和query方式一样

通过props传参

    {
      path: '/home',
      name: 'home',
      component: HomeView,
      children: [
        {
          path: 'news',
          name:'news',
          component:News,
        },
        {
          path: 'messages',
          name:'messages',
          component: Messages,
          children: [
            {
              path: 'detail/:id/:title',
              name: 'detail',
              component: Detail,
              //props，值为布尔值，若为真，就会把该路由组件收到的所有params参数传给detail组件
              props:true
              
            }
          ]
        }
      ]
    },

接受参数

<template>
    <div>
        <h2>详情页</h2>
        <ul>
            <!-- <li>消息编号{{route.params.id}}</li>
            <li>消息标题{{route.params.title}}</li> -->
            <li>消息编号{{id}}</li>
            <li>消息标题{{title}}</li>
        </ul>
    </div>
</template>
<script setup>
import {useRoute} from 'vue-router'
import {defineProps,toRefs} from 'vue'

const props=defineProps(['id','title'])
const {id,title}=toRefs(props)
</script>

页面不可以返回
通过在route-link中加入replace=“true”，则不可以返回上一个页面，原理是，封闭的栈中，后一条记录会替换上一条记录

<router-link replace="true" to="/home">home</router-link><br>

编程式导航
例如给button绑定页面前进后退，是否消除记录式的前进
push、replace、back、forword、go
具体包含哪些操作可以打印router查看

import {useRouter} from 'vue-router'
const router=useRouter()
console.log(router);

<template>
    <div>
        <ul>
            <li v-for="m in messagesList" :key="m.id">
                <router-link 
                :to="{name:'detail',
                query:{id:m.id,title:m.title}}">
                {{m.title}}</router-link>
                <button @click="pushShow(m)">push查看</button>
                <button @click="replaceShow(m)">replace查看</button>

            </li>
        </ul>
    </div>
    <router-view></router-view>
</template>
<script setup>
import {reactive} from 'vue'
import {useRouter} from 'vue-router'
const router=useRouter()
console.log(router);
let messagesList=reactive([
    {id:'001',title:'title001'},
    {id:'002',title:'title002'},
    {id:'003',title:'title003'}
])
const pushShow=(m)=>{
    router.push({
        name:'detail',
        query:{
            id:m.id,
            title:m.title
        }
    })
}
const replaceShow=(m)=>{
    router.replace({
        name:'detail',
        query:{
            id:m.id,
            title:m.title
        }
    })
}
</script>

缓存路由组件

<script setup>
import {ref} from 'vue'

</script>
<template>
  <h2>Home组件内容</h2>
  <router-link to="/home/news">news</router-link>&nbsp;
  <router-link to="/home/messages">messages</router-link>
 

<router-view v-slot="{ Component }">
  <keep-alive>
    <component :key="$route.name" :is="Component" v-if="$route.meta.keepAlive" />
  </keep-alive>
  <component :key="$route.name" :is="Component" v-if="!$route.meta.keepAlive" />
</router-view>
</template>

{
      path: '/home',
      name: 'home',
      component: HomeView,
      children: [
        {
          path: 'news',
          name:'News',
          component: News,
          meta: {
            keepAlive:true
          }
        },
        {
          path: 'messages',
          name:'messages',
          component: Messages,
          children: [
            {
              path: 'detail',
              name: 'detail',
              component: Detail,
              //props，值为布尔值，若为真，就会把该路由组件收到的所有params参数传给detail组件
              // props:true
              
            }
          ]
        }
      ]
    },

两个新的生命周期钩子
作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态
activated路由组件被激活时触发
deactivated路由组件失活时触发

路由守卫
全局路由守卫、独享路由守卫、组件内路由守卫

全局路由守卫
全局前置路由：router.beforeEach((to,from,next)=>{})
全局后置路由：router.afterEach((to,from)=>{})

独享路由守卫：
beforeEnter((to,from,next)=>{})

组件内路由守卫：
beforeRouteEnter((to,from,next)=>{})
afterRouteLeave((to,from,next)=>{})

标签：name,title,component,守卫,router,path,路由
From： https://www.cnblogs.com/shuchenhao/p/16954290.html

相关文章

赞助商

阅读排行