Vue-Route

最新推荐文章于 2025-05-08 10:16:10 发布

原创最新推荐文章于 2025-05-08 10:16:10 发布

· 1.1k 阅读

11 ·

版权

文章标签：

#vue.js #前端 #javascript

一、相关理解

1. vue-router的理解

vue的一个插件库，专门用来实现SPA应用

2. 对SPA应用的理解

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

3. 路由的理解

什么是路由

一个路由是一组映射关系（key-value）
多个路由需要经过路由器的管理
前端路由：key是路径，value是组件

路由的分类

后端路由：
a. 理解：value是function，用于处理客户端提交的请求
b. 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
前端路由
a. 理解：value是component，用于展示页面内容
b. 工作过程：当浏览器的路径改变时，对应的组件就会显示

二、基本使用

安装vue-router，命令：npm i vue-router
应用插件：vue.use(VueRouter)
编写router配置项

// 该文件专门用于创建整个应用的路由器
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',
            component: Home
        }
    ]
})

实现切换（active-class可配置高亮样式）

<router-link active-class="active" to="/about">About</router-link>
<router-link active-class="active" to="/home">Home</router-link>

指定展示位置

<!-- 指定组价的呈现位置 -->
<router-view></router-view>

三、几个注意点

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

四、嵌套（多级）路由

配置路由规则，使用children配置项

routes:[
  {
    path:'/about',
    component: About
  },
  {
    path:'/home',
    component: Home,
    children:[ // 通过children配置子级路由
      {
        path:'news',  // 此处一定不要写 '/news'
        component: News
      },
      {
        path:'message', // 此处一定不要写 '/message'
        component: Message
      }
    ]
  }
]

跳转（要写完整路径）

<router-link to="/home/news">News</router-link>

五、路由传参

传递参数

<!-- 跳转路由并携带query参数，to的字符串写法 -->
<router-link :to="`/home/message/detail?id=${ m.id }&title=${ m.title }`">{{ item.title }}</router-link>
// <!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link 
  :to="{
    path:'/home/message/detail',
    query:{
    id: item.id,
      title: item.title
    }
  }"
>{{ item.title }}</router-link>

接收参数

$route.query.id
$route.query.title

六、命名路由

作用：可以简化路由的跳转
如何使用
a. 给路由命名：

{
  path:'/home',
    component: Home,
    children:[
    {
      path:'news',
      component: News
    },
    {
      path:'message',
      component: Message,
      children:[
        {
          name: 'xiangqing',  // 给路由命名
          path:'detail',
          component: Detail
        }
      ]
    }
  ]
}

简化跳转

<!-- 简化前，需要写完整的路径 -->
<router-link :to="{ path:'/home/message/detail'}">{{ item.title }}</router-link> 
<!-- 简化后，直接通过名字跳转 -->
<router-link :to="{name: 'xiangqing'}">{{ item.title }}</router-link>
<!-- 简化写法配合传参 -->
<router-link :to="{
  name: 'xiangqing',
  query:{
    id: item.id,
    title: item.title
  }
}">{{ item.title }}</router-link>

七、路由的params参数

配置路由，声明接受params参数

{
  path:'/home',
    component: Home,
    children:[
    {
      path:'news',
      component: News
    },
    {
      path:'message',
      component: Message,
      children:[
        {
          name: 'xiangqing',
          path:'detail/:id/:title',  // 使用占位符声明接受params参数
          component: Detail
        }
      ]
    }
  ]
}

传递参数

<!-- 跳转路由并携带parmas参数，to的字符串写法 -->
<router-link :to="`/home/message/detail/${item.id}/${item.title}`">{{ item.title }}</router-link>

<!-- 跳转路由并携带params参数，to的对象写法 -->
<router-link :to="{
  name: 'xiangqing',
  // path:'/home/message/detail',
  params:{
  id: item.id,
  title: item.title
  }
  }">{{ item.title }}</router-link>

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

$route.params.id
$route.params.title

八、路由的props配置

作用：让路由组件更方便的收到参数

{
  name: 'xiangqing',
  path: 'detail/:id/:title',
  component: Detail,
  // props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail,,用的非常少
  props: {a:1, b:'hello'}

  // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail
  props: true

  // props的第三种写法，值为函数
  props({$route}){
    return {
      id: $route.query.id,
      title: $route.query.title
    }
  }
}

九、router-link的replace模式

作用：控制路由跳转时操作浏览器李世记录的模式
浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录，路由跳转时候默认为push
如何开启replace模式：<router-link replace . . . .>News</router-link>

十、编程式路由导航

作用：不借助实现路由跳转，让路由跳转更加灵活
具体编码：

methods: {
  pushShow(item) {
    this.$router.push({
      name: "xiangqing",
      query: {
        id: item.id,
        title: item.title,
      },
    });
  },
  replaceShow(item) {
    this.$router.replace({
      name: "xiangqing",
      query: {
        id: item.id,
        title: item.title,
      },
    })
  }
},

  this.$router.go(1);  // 可前进也可后退
  this.$router.back()  // 后退
  this.$router.forward()  // 前进

十一、缓存路由组件

作用：让不展示的路由组件保持挂载，不被销毁
具体编码：

<keep-alive include="News">  // News组件名
  <router-view></router-view>
</keep-alive>

十二、路由守卫

作用：对路由进行权限控制
分类：全局守卫、独享守卫、组件内守卫

1. 全局守卫

// 全局前置路由守卫---> 每当路由跳转之前，会调用这个函数
router.beforeEach((to, from, next) => {
  console.log('beforeEach')
  if (to.meta.isAuth) {  // 判断是否需要鉴权
    if (localStorage.getItem('school') === 'atHIST') { // 权限控制的具体规则
      next()
    } else {
      alert('学校名不对，无权访问')
    }
  } else {
    next()  // 放行
  }
})

// 全局后置路由守卫---> 每当路由跳转之后，会调用这个函数
router.afterEach((to, from) => {
  document.title = to.meta.title   // 修改网页的title
  console.log('后置路由守卫');
})

2. 独享路由守卫

beforeEnter: (to, from, next) => {
  console.log('beforeEnter');
  if (to.meta.isAuth) {  // 判断是否需要鉴权
    if (localStorage.getItem('school') === 'atHIST') {
      next()
    } else {
      alert('学校名不对，无权访问')
    }
  } else {
    next()
  }
}

3. 组件内路由守卫

<!-- 进入守卫，通过路由规则，进入该组件时被调用 -->
beforeRouteEnter(to, from, next) {
  console.log('beforeRouteEnter');
  if (to.meta.isAuth) {
    // 判断是否需要鉴权
    if (localStorage.getItem("school") === "atHIST") {
      next();
    } else {
      alert("学校名不对，无权访问");
    }
  } else {
    next();
  }
  next();
},
//离开守卫，通过路由规则，离开该组件时被调用
  beforeRouteLeave(to, from, next) {
    console.log('beforeRouteLeave');
    next()
  },