vue-router路由

2023-11-02 本文已影响0人渚清与沙白

component文件夹：经常放置非路由组件
pages|views文件夹：经常放置路由组件
项目中配置的路由一般放在router文件夹中

配置路由

在 /src/router/index.js中配置。

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)

export default new VueRouter({
  mode: history, // 默认 hash
  routes:[
  {
      name:'login',// 给路由命名  路由path过长时，跳转路由可以简化编码
      path:'/dashboard',// 路径
      component:Home,// 组件
      children: [// 子路由  嵌套路由
        name:'',
        path:'about/:id/:title', // params传参设置占位符
        component:Banner,
        props: {id: 2,title: '关于'},// 第一种写法：值为对象，该对象的所有key-value都会以props的形式传给组件
        props: true, // 第二种写法：值为布尔值，若为真，会把路由组件收到的params参数以props形式传递给组件
        props:($route){// 第三中写法：值为函数，函数返回的对象会把路由组件收到的参数以props形式传递给组件
          return {id: $route.query.id, title: $route.query.title};// 必须返回对象
        }, 
        props: ({query:{ id,title }}){// 第三种写法（简写）：连续性解构赋值
          return { id,title };
        },
        meta: {// 存放自定义数据  用于路由守卫做权限校验
          title: '首页',
          authority: true,// 是否需要鉴权
        },
      ]
    }
  ]
 });

在main.js中注册路由

路由组件与非路由组件的区别：

路由组件一般放置在pages|views文件夹，非路由组件一般放置在component文件夹中
路由组一般需要在router文件夹中进行注册，使用时用的就是组件的名字；非路由组件在使用时，一般是以标签的形式使用
注册完路由，不管是路由组件还是非路由组件身上都有$route、$router属性
$route：每个组件实例都有一个route属性，存储这自己的路由信息。一般获取路由信息【路径、query、params】
$router：整个应用只有一个$router属性，一般进行编程式导航进行路由跳转【push|replace】

切换路由后，上个路由组件默认被销毁，新的路由组件被挂载。
配置路由规则时，一级路由组件需要加/，子路由不需要加/，Vue自动会加上。

路由跳转

路由跳转的两种形式：声明式导航 router-link，编程式导航 $router.push|replace
声明式导航能做的，编程时导航都能；但是编程式导航还可以做一些其他业务逻辑。
<router-link active-class="" to="/home"></router-link> router-link有active-class、to属性。

路由传参

params参数：属于路径当中的一部分，需要注意，在配置的时候需要占位:id
query参数：不属于路径当中的一部分，不需要占位，类似ajax中的queryString /home?k=v

query参数

传递参数

 <!-- 跳转并携带query参数，to的字符串模板写法 -->
    <router-link :to="`/dashboard/workplace?id=${id}`" >注册账户</router-link>
    <!-- 跳转并携带query参数，to的对象写法 -->
    <router-link :to="{path: `/dashboard/workplace`, query: {id: id}}" >注册账户</router-link>
    <router-link :to="{name: 'register',query: {id}}" >注册账户</router-link>// 命名路由跳转

接收参数
$route.query.id

    <div class="footer">
      {{ $route.query.id }}
    </div>

params参数

传递参数

 <!-- 跳转并携带params参数，to的字符串模板写法 -->
    <router-link :to="`/dashboard/workplace/${id}/${title}`" >注册账户</router-link>
    <!-- 错误写法❌ 不可使用 path，只能使用name -->
    <router-link :to="{path: `/dashboard/workplace`, params: {id: id}}" >注册账户</router-link>
    <!-- 跳转并携带params参数，to的对象写法  ✅-->    
    <router-link :to="{name: 'register',params: {id}}" >注册账户</router-link>// 命名路由跳转

接收参数
$route.params.id

    <div class="footer">
      {{ $route.params.id }}
    </div>

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

props传参

路由传递参数以props的方式传递给组件，需要在路由配置规则中配置props项。

有三种配置方法

第一种写法：值为对象，该对象的所有key-value都会以props的形式传给组件，这里只能传递固定的值。
props: {id: 2,title: '关于'}
第二种写法：值为布尔值，若为真，会把路由组件收到的params参数以props形式传递给组件
props: true
第三中写法：值为函数，函数返回的对象会把路由组件收到的query参数以props形式传递给组件

props:($route){
   return {id: $route.query.id, title: $route.query.title};// 必须返回对象
}, 
// 简写：连续性解构赋值
props: ({query:{ id,title }}){
   return { id,title };
}

组件获取props
配置props，数组方式接收
props: ['id', 'title']

注意

对象写法可以是name、path形式，但是path不能结合params参数一起使用
如果路由要求传递params参数，但是没有传递，URL会出现问题。要想不出现问题，需要在配置路由的时候，在占位参数后面加上?，该符号表示params可传可不传递
params传递是一个空字符串，需要使用undefined，才能保证URL正常

路由模式

路由历史记录模式有push和replace,Vue默认的是push模式。push模式会保留历史记录，可以回退也可以前进。replace模式不会保留历史记录，会替换当前路由。
声明式导航使用replace模式需要在<router-link>标签添加replace属性。

<router-link :replace="true"  to="/login></router-link">
//简写
<router-link replace  to="/login></router-link>

编程式路由导航 `$router`

作用：不借助router-link实现理由跳转

this.router.push(
  {
    name: 'login',
    params: {},
  }
)
this.router.replace(
  {
    name: 'login',
    params: {},
  }
)

this.router.back()：后退
this.router.forward()：前进
this.router.go(-2): 前进或后退多少个路由

路由缓存 `<keep-alive/>`

组件不会被销毁

// 缓存单个组件  字符串形式
<keep-alive includes=“News”>
  <router-view> </router-view>
</keep-alive>

// 缓存多个组件 数组形式
<keep-alive :includes=“['News','Message']”>
  <router-view> </router-view>
</keep-alive>

includes：指定缓存的组件【设置组件名】

缓存组件后，有可以利用激活失活的组件生命周期来完成显示与隐藏的监听

  activated () {
     // 组件激活时触发
  },
  deactivated () {
     // 组件失活时触发
  },

路由守卫

全局守卫
为VueRouter对象设置beforeEach或afterEach函数

全局前置守卫 beforeEach ：【初始化】时执行、每次路由【切换前】执行
router.beforeEach((to, from, next) => guard(to, from, next, options))
to：去哪个路由
from：来自哪个路由
next()：放行
全局后置守卫 afterEach：【初始化】时执行、每次路由【切换后】执行
router.afterEach((to, from) => guard(to, from, options))
后置守卫没有next函数。
可以用来修改网页页签标题

router.afterEach((to,from)=>{
  document.title = to.meta.title || 'xx系统'
})

路由独享路由守卫 beforeEnter
路由独享守卫 只有前置，没有后置！在路由配置中添加beforeEnter函数


{
   name:'home',
   path: '/home',
   component: Home,
   //独享前置路由守卫
   beforeEnter:(to,from,next)=>{
      //逻辑和全局路由配置一样
      //to是你要跳转到那个路由组件
      //from是你从哪个路由组件跳转过来的
      //可以在next()前设置条件，当符合条件就放行，比如：
      if(localStorage.getItem('token')){
        next()
      }
    }
  children: [{
       name:'message/:id/:title', //占位符
       path: "message",
        component: Message
   }]
}

组件内路由守卫
beforeRouteEnter : 通过路由规则，进入该组件时被调用
beforeRouteUpdate : 通过路由规则，该组件被复用时调用
beforeRouteLeave : 通过路由规则，离开该组件时被调用

  beforeRouteEnter (to, from, next) {
    // ...
  },
  beforeRouteLeave (to, from, next) {
    // ...
  },

----

路由元信息 `meta`

定义路由的时候可以配置meta字段，meta是一个对象
通过$route.meta获取元信息
使用场景：可以控制组件的隐藏与显示

路由器工作模式

history模式与hash模式

对于一个url来说，什么是hash值？
hash值是指一个url中，#后面的内容，它是用来表示一个页面的某个位置
hash值不会包含在http 请求中。即：hash值不会带给服务器
hash模式：
1.1 url中永远带着 #
1.2 兼容性好
1.3 无需刷新页面
1.4 分享给App时，若App校验严格，地址会被标记为不合法
history模式：
1.1 url中不会带着 #
1.2 兼容性较差
1.3 应用上线需后端人员配合解决刷新页面报404的问题
history模式下解决404的问题
针对node服务器解决方案：
使用服务器中间件 connect-history-api-fallback
const history = require('connect-history-api-fallback')
app.use(history())

node服务器部署前端项目

npm init
npm i express
npm server

image.png

const express = require("express");
const app = express();

// 解决history模式刷新页面出现404的问题
// 使用服务器中间件 connect-history-api-fallback
// const history = require('connect-history-api-fallback')
// app.use(history())

// 中间件
app.use(express.static(__dirname+'/static'))//指定静态资源

app.get("/person", (req, res) => {
    res.send({
        name:'张三',
        age:20
    });
});
app.listen(5005, (err) => {
    console.log("Server is running on port 5005");
})

路由重定向

在项目运行时，访问/，立马让他定向到首页

vue-router路由

配置路由

路由组件与非路由组件的区别：

路由跳转

路由传参

query参数

params参数

props传参

路由模式

编程式路由导航 `$router`

路由缓存 `<keep-alive/>`

路由守卫

----

路由元信息 `meta`

路由器工作模式

history模式与hash模式

node服务器部署前端项目

路由重定向

猜你喜欢

热点阅读

vue-router路由

配置路由

路由组件与非路由组件的区别：

路由跳转

路由传参

query参数

params参数

props传参

路由模式

编程式路由导航 $router

路由缓存 <keep-alive/>

路由守卫

----

路由元信息 meta

路由器工作模式

history模式与hash模式

node服务器部署前端项目

路由重定向

猜你喜欢

热点阅读

编程式路由导航 `$router`

路由缓存 `<keep-alive/>`

路由元信息 `meta`