Vue路由3.x和4.x学习笔记

笔记基于:https://router.vuejs.org/zh/ 和黑马视频

路由的基本概念与原理

路由

后端路由

  • 概念:根据不同的用户URL请求,返回不同的内容
  • 本质:URL请求地址服务器资源之问的对应关系

Vue路由3.x和4.x学习笔记_第1张图片

SPA

  • 后端渲染(存在性能问题,假如用户频繁地提交表单,则会造成页面频繁刷新)。
  • Ajax前端渲染(前端渲染提高性能,但是不支持浏览器的前进后退操作)。
  • SPA( Single Page Application)单页面应用程序:整个网站只有一个页面,内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作。
  • SPA实现原理之一:基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化、但是hash的变化不会触发新的URL请求)。
  • 在实现SPA过程中,最核心的技术点就是前端路由

前端路由

  • 概念:根据不同的用户事件,显示不同的页面内容。
  • 本质:用户事件事件处理函数之间的对应关系。

Vue路由3.x和4.x学习笔记_第2张图片

前端路由的工作方式

① 用户点击了页面上的路由链接

② 导致了 URL 地址栏中的 Hash 值发生了变化

③ 前端路由监听了到 Hash 地址的变化

④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中

结论:前端路由,指的是 Hash 地址组件之间的对应关系!

实现简单的前端路由

基于URL中的hash实现(点击菜单的时候改变URL的hash,根据hash的变化控制组件的切换)

// 监听window的onhashchange事件,根据最新的hash值,切换要显示的组件名称
window.onhashchange=function(){
    //通过location.hash 获取到最新的hash值
}

实现的效果:

根据location.hash的值切换页面显示的内容

Vue路由3.x和4.x学习笔记_第3张图片

<div id="app">
    
    <a href="#/zhuye">主页a>
    <a href="#/keji">科技a>
    <a href="#/caijing">财经a>
    <a href="#/yule">娱乐a>
    
    
    <component :is="comName">component>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            comName: 'zhuye'
        },
        // 注册私有组件
        components: {
            zhuye: {
                template: `

主页信息

`
, }, keji: { template: `

科技信息

`
}, caijing: { template: `

财经信息

`
}, yule: { template: `

娱乐信息

`
} } }); window.onhashchange = function () { // 通过location.hash 获取到最新的hash值 // 根据hash值切换组件 console.log(location.hash); let list = ['zhuye', 'keji', 'caijing', 'yule']; list.some(item => { if (location.hash.includes(item)) { vm.comName = item; return true; } }) }
script>

补充知识点

  1. location.hash

    Location 接口的 hash 属性返回一个 USVString,其中会包含URL标识中的 '#' 和 后面URL片段标识符。

    <a id="myAnchor" href="/en-US/docs/Location.href#Examples">Examplesa>
    <script>
      var anchor = document.getElementById("myAnchor");
      console.log(anchor.hash); // 返回'#Examples'
    script>
    
  2. 关于url对象,在这篇里写了很多。

VUE Router

Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue.js 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式,在 IE9 中自动降级
  • 自定义的滚动条行为

vue-router 目前有 3.x 的版本和 4.x 的版本。其中:

  • vue-router 3.x 只能结合 vue2 进行使用
  • vue-router 4.x 只能结合 vue3 进行使用
  • vue-router 3.x 的官方文档地址:https://router.vuejs.org/zh/
  • vue-router 4.x 的官方文档地址:https://next.router.vuejs.org/

使用步骤

  1. 引入相关的库文件

    // 先导入vue再导入vue router
    <script src="/path/to/vue.js"></script>
    <script src="/path/to/vue-router.js"></script>
    
  2. 添加路由链接

    
    <div id="app">
        
        
        
        <router-link to='/user'>Userrouter-link>
        <router-link to='/register'>Registerrouter-link>
    div>
    
  3. 添加路由填充位

    
    
    <router-view>router-view>
    
  4. 定义路由组件

    const User={
        template:`

    user 组件

    `
    } const Register={ template:`

    register

    `
    }
  5. 创建路由实例并配置路由规则

    // 创建路由实例对象
    const router = new VueRouter({
        // routes是路由规则数组
        routes:[
            // 每一个路由规则都是一个配置对象,其中至少包括 path 和 component 两个属性:
            // path 表示当前路由规则匹配到的hash地址
            // component 表示当前路由规则要展示的组件
            {path:'/user',component:User},
            {path:'/register',component:Register},
        ]
    })
    
  6. 把路由挂载到Vue根实例中

    new Vue({
        el: "#app",
        data: {},
        // 挂载路由实例对象
        router
    })
    

最终代码:

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
    <title>Documenttitle>
head>

<body>
    <div id="app">
        
        
        
        <router-link to='/user'>Userrouter-link>
        <router-link to='/register'>Registerrouter-link>
        
        
        <router-view>router-view>

    div>

    <script>
        const User = {
            template: `

user 组件

`
} const Register = { template: `

register

`
} // 创建路由实例对象 const router = new VueRouter({ // routes是路由规则数组 routes: [ // 每一个路由规则都是一个配置对象,其中至少包括 path 和 component 两个属性: // path 表示当前路由规则匹配到的hash地址 // component 表示当前路由规则要展示的组件 { path: '/user', component: User }, { path: '/register', component: Register }, ] }) new Vue({ el: "#app", data: {}, // 挂载路由实例对象 router })
script> body> html>

Vue路由3.x和4.x学习笔记_第4张图片

路由重定向

路由重定向:用户在访问地址A的时候,强制用户跳转到地址C,从而展示特定的组件页面。

通过路由规则的 redirect属性,指定个新的路由地址,可以很方便地设置路由的重定向。

基于先前的代码,实现当用户打开页面时,页面就跳转到’/user’。

const router = new VueRouter({
    // routes是路由规则数组
    routes: [
        // path 表示需要被重定向的原地址, redirect表示将要被重定向的新地址
        {path:'/',redirect:'/user'},
        { path: '/user', component: User },
        { path: '/register', component: Register },
    ]
})

嵌套路由

嵌套路由功能分析

  • 点击父级路由链接显示模板内容
  • 模板内容中又有子级路由链接
  • 点击子级路由链接显示子级模板内容

Vue路由3.x和4.x学习笔记_第5张图片

具体实现

1.父路由组件模板

<div id="app">
    <router-link to='/user'>用户router-link>
    <router-link to='/register'>注册router-link>
    
    <router-view>router-view>
div>

2.子路由模板

  • 子路由链接
  • 子路由填充位置
const Register = {
    template: `
    

登录


tab1 tab2
`
};

3.父路由通过children属性配置子级路由,children数组表示子路由规则。

const router = new VueRouter({
    // 定义路由规则
    routes: [
        // 重定向 当用户打开页面时,定位到user组件
        { path: '/', redirect: '/user' },
        { path: '/user', component: User },
        {
            path: '/register',
            component: Register,
            // 通过children属性,为/register添加子路由规则
            children:[
                {path:'/register/tab1',component:Tab1},
                {path:'/register/tab2',component:Tab2}
            ]
        }
    ]
})

Vue路由3.x和4.x学习笔记_第6张图片

全部代码见:http://jsrun.net/PU8Kp/edit

动态路由匹配

通过动态路由参数的模式进行路由匹配

在路由规则中,要配置以冒号开头的动态参数

const router = new VueRouter({
    // routes是路由规则数组
    routes: [
        // 动态路径参数,以冒号开头
        { path: '/user/:id', component: User }

    ]
})

直接通过params获取参数

在路由组件中,可以通过$route.params获取路由参数。

const User = {
    // 路由组件中通过$route.params获取路由参数
    template: `

user 组件---{{$route.params.id}}

`
}

通过props传参

$route与对应路由形成高度耦合,不够灵活。所以,可以使用 props将组件和路由解耦。

  1. 路由规则中props的值为布尔值

    const router = new VueRouter({
                // routes是路由规则数组
                routes: [
                    // 如果props设置为true,route.params将会被设置为组件的属性
                    { path: '/user/:id', component: User,props:true},
                ]
            })
    
    const User = {
        props:['id'], 
        // 使用 props 接收路由参数
        // 当然也可以继续使用$route.params.id
        template: `

    user 组件---{{id}}--{{$route.params.id}}

    `
    }
  2. 路由规则中props的值是对象类型

    如果 props是一个对象,它会被按原样设置为组件属性,此时路径中的id已经不能访问了。(如果props设置为true,route.params才会被设置为组件的属性)

    // 创建路由实例对象
    const router = new VueRouter({
        // routes是路由规则数组
        routes: [
            // 如果 props是一个对象,它会被按原样设置为组件属性
            { path: '/user/:id', component: User,props:{uname:'lisi',age:20}},
        ]
    })
    
    const User = {
        props: ['id', 'uname', 'age'],
        // 此时的id并没有传值,需要使用$route.params.id才行
        template: `

    user 组件---Id:{{id}}--id:{{$route.params.id}}--{{uname}}--{{age}}

    `
    }

    最终效果:

    image-20210803134627526

  3. props的值为函数类型

    形参route的值等于 route.params,即path中的动态参数。

    Vue路由3.x和4.x学习笔记_第7张图片

    const User = {
        props: ['id', 'uname', 'age'],
        template: `

    user 组件---Id:{{id}}--id:{{$route.params.id}}--{{uname}}--{{age}}

    `
    }
    // 创建路由实例对象
    const router = new VueRouter({
        // routes是路由规则数组
        routes: [
            // 如果 props是一个对象,它会被按原样设置为组件属性
            {
                path: '/user/:id',
                component: User,
                props: (route) => { return {uname:'zhangsan',age:20,id:route.params.id} }
            },
        ]
    })
    

Vue路由3.x和4.x学习笔记_第8张图片

命名路由

为了更方便的表示路由的路径,可以给路由规则起一个别名,即为“命名路由”。

注意:在to前面需要加上冒号:

const router = new VueRouter({
    // routes是路由规则数组
    routes: [
        {
            // 命名路由
            name:'user',
            path: '/user/:id',
            component: User,
        },
    ]
})
<div id="app">
    <router-link :to="{name:'user',params:{id:123}}">User1router-link>
    
    <router-link to="/user/123">User2router-link>
    <router-view>router-view>
div>

编程式导航

声明式导航:通过点击链接实现导航的方式,叫做声明式导航
例如:普通网页中的 链接或vue中的

编程式导航:通过调用JavaScript形式的API实现导航的方式,叫做编程式导航
例如:普通网页中的location.href

vue中常见的编程式导航:

  • this.$route.push('hash地址')

    注意:在 Vue 实例内部,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push

    想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

    注意:如果提供了 pathparams 会被忽略,上述例子中的 query 并不属于这种情况。

    // 字符串
    router.push('/home')
    
    // 对象
    router.push({ path: '/home' })
    
    // 命名的路由
    router.push({ name: 'user', params: { userId: '123' }})
    
    // 带查询参数,变成 /register?plan=private
    router.push({ path: 'register', query: { plan: 'private' }})
    
  • this.$router.go(n)

    这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)

const User = {
    props: ['id', 'uname', 'age'],
    template: `

user组件-- 用户id为:{{id}}--姓名:{{uname}}--年龄为:{{age}}

`
, methods: { goRegister(){ //跳转到注册页面 this.$router.push('/register'); } }, } const Register = { template: `

register

`
, methods: { goback(){ this.$router.go(-1); } }, } // 创建路由实例对象 const router = new VueRouter({ // routes是路由规则数组 routes: [ { path: '/user/:id', component: User, props: route => ({ id: route.params.id, uname: 'jiaqicoder', age: 22 }) }, { path: '/register', component: Register }, ] })

Vue-Router小案例

根据项目的整体布局划分好组件结构,通过路由导航控制组件的显示。

1.抽离并渲染 App根组件

2.将左侧菜单改造为路由链接

3.创建左侧菜 单对应的路由组件

4.在右侧主体区 域添加路由占位符

5.添加子路由规则

6.通过路由重定向默认渲染用户组件

7.渲染用户列表数据

8.编程式导航跳转到用户详情页

9.实现后退功能

素材代码:

http://jsrun.net/t98Kp/edit

最终效果:

Vue路由3.x和4.x学习笔记_第9张图片

实现的代码:(省略了css)

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>基于vue-router的案例title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js">script>
head>

<body>
  
  <div id="app">
    
    <router-view>router-view>
  div>
  <table>
    <tr>
      <th>idth>
      <th>nameth>
      <th>ageth>
    tr>
  table>
  <script>
    // 定义app根组件
    const App = {
      template: `
          
后台管理系统
  • 用户管理
  • 权限管理
  • 商品管理
  • 订单管理
  • 系统设置
版权信息
`
, }; const UserInfo={ template:`
用户详情页--id:{{id}}---{{$route.params.id}}
`
, props:['id'], methods: { goBack(){ this.$router.go(-1); } }, } const Users = { template: `

用户管理

id name age 操作
{{item.id}} {{item.name}} {{item.age}} 详情
`
, methods: { goDetail(id){ this.$router.push('/userinfo/'+id) } }, data() { return { userlist: [ { id: 1, name: '张三', age: 30 }, { id: 2, name: '张四', age: 25 }, { id: 3, name: '张五', age: 47 }, { id: 4, name: '张六', age: 87 } ] } } }; const Rights = { template: `

权限管理

`
, }; const Goods = { template: `

商品管理

`
, }; const Orders = { template: `

订单管理

`
, }; const Settings = { template: `

系统设置

`
, }; // 创建路由对象 const router = new VueRouter({ routes: [{ path: '/', component: App, redirect: '/users', children: [ { path: '/users', component: Users }, { path: '/userinfo/:id', component: UserInfo ,props:true}, { path: '/rights', component: Rights }, { path: '/goods', component: Goods }, { path: '/orders', component: Orders }, { path: '/settings', component: Settings }, ] }, ], }) const vm = new Vue({ el: '#app', router });
script> body> html>

案例思路:
1).先将素材文件夹中的11.基于vue-router的案例.html复制到我们自己的文件夹中。
看一下这个文件中的代码编写了一些什么内容,
这个页面已经把后台管理页面的基本布局实现了
2).在页面中引入vue,vue-router
3).创建Vue实例对象,准备开始编写代码实现功能
4).希望是通过组件的形式展示页面的主体内容,而不是写死页面结构,所以我们可以定义一个根组件:

//只需要把原本页面中的html代码设置为组件中的模板内容即可
const app = {
    template:`
传智后台管理系统
  • 用户管理
  • 权限管理
  • 商品管理
  • 订单管理
  • 系统设置
添加用户表单
版权信息
`
}

5).当我们访问页面的时候,默认需要展示刚刚创建的app根组件,我们可以
创建一个路由对象来完成这个事情,然后将路由挂载到Vue实例对象中即可

const myRouter = new VueRouter({
    routes:[
        {path:"/",component:app}
    ]
})

const vm = new Vue({
    el:"#app",
    data:{},
    methods:{},
    router:myRouter
})

补充:到此为止,基本的js代码都处理完毕了,我们还需要设置一个路由占位符

<body>
  <div id="app">
    <router-view></router-view>
  </div>
</body>

6).此时我们打开页面应该就可以得到一个VueRouter路由出来的根组件了
我们需要在这个根组件中继续路由实现其他的功能子组件
先让我们更改根组件中的模板:更改左侧li为子级路由链接,并在右侧内容区域添加子级组件占位符

const app = {
    template:`
........
  • 用户管理
  • 权限管理
  • 商品管理
  • 订单管理
  • 系统设置
.......
`
}

然后,我们要为子级路由创建并设置需要显示的子级组件

//建议创建的组件首字母大写,和其他内容区分
const Users = {template:`

用户管理

`
} const Access = {template:`

权限管理

`
} const Goods = {template:`

商品管理

`
} const Orders = {template:`

订单管理

`
} const Systems = {template:`

系统管理

`
} //添加子组件的路由规则 const myRouter = new VueRouter({ routes:[ {path:"/",component:app , children:[ { path:"/users",component:Users }, { path:"/accesses",component:Access }, { path:"/goods",component:Goods }, { path:"/orders",component:Orders }, { path:"/systems",component:Systems }, ]} ] }) const vm = new Vue({ el:"#app", data:{}, methods:{}, router:myRouter })

7).展示用户信息列表:
A.为Users组件添加私有数据,并在模板中循环展示私有数据

const Users = {
  data() {
    return {
      userList: [
        { id: 1, name: "zs", age: 18 },
        { id: 2, name: "ls", age: 19 },
        { id: 3, name: "wang", age: 20 },
        { id: 4, name: "jack", age: 21 },
      ]
    }
  },
  template: `

用户管理

编号 姓名 年龄 操作
{{item.id}} {{item.name}} {{item.age}} 详情
`
}

8.当用户列表展示完毕之后,我们可以点击列表中的详情来显示用户详情信息,首先我们需要创建一个组件,用来展示详情信息

const UserInfo = {
    props:["id"],
    template:`
用户详情

查看 {{id}} 号用户信息

`
, methods:{ goBack(){ //当用户点击按钮,后退一页 this.$router.go(-1); } } }

然后我们需要设置这个组件的路由规则

const myRouter = new VueRouter({
    routes:[
        {path:"/",component:app , children:[
            { path:"/users",component:Users },
            //添加一个/userinfo的路由规则
            { path:"/userinfo/:id",component:UserInfo,props:true},
            { path:"/accesses",component:Access },
            { path:"/goods",component:Goods },
            { path:"/orders",component:Orders },
            { path:"/systems",component:Systems },
        ]}
    ]
})

const vm = new Vue({
    el:"#app",
    data:{},
    methods:{},
    router:myRouter
})

再接着给用户列表中的详情a链接添加事件

const Users = {
    data(){
        return {
            userList:[
                {id:1,name:"zs",age:18},
                {id:2,name:"ls",age:19},
                {id:3,name:"wang",age:20},
                {id:4,name:"jack",age:21},
            ]
        }
    },
    template:`

用户管理

编号 姓名 年龄 操作
{{item.id}} {{item.name}} {{item.age}} 详情
`
, methods:{ goDetail(id){ this.$router.push("/userinfo/"+id); } } }

Vue router 4

使用步骤

① 在项目中安装 vue-router

② 定义路由组件

③ 声明路由链接和占位符

④ 创建路由模块

⑤ 导入并挂载路由模块

1.在项目中安装vue-router

在 vue3 的项目中,只能安装并使用 vue-router 4.x。安装的命令如下:

npm install vue-router@next 

2 定义路由组件

举个栗子:在项目中定义 MyHome.vue、MyMovie.vue、MyAbout.vue 三个组件,将来要使用 vue-router 来控制它们的展示与切换。Vue路由3.x和4.x学习笔记_第10张图片

3. 声明路由链接和占位符

可以使用 标签来声明路由链接,并使用 标签来声明路由占位符。示例代码如下:


4 创建路由模块

在项目中创建 router.js 路由模块,在其中按照如下 4 个步骤创建并得到路由的实例对象:
① 从 vue-router 中按需导入两个方法

// 从vue-router中按需导入两个方法

// createRouter方法用于创建路由的实例对象
// createWebHashHistory 用于指定路由的工作模式(hash模式)

import { createRouter,createWebHashHistory } from "vue-router";

② 导入需要使用路由控制的组件

import Home from "./MyHome.vue";
import About from "./MyAbout.vue";
import Movie from "./MyMovie.vue";

③ 创建路由实例对象

// 创建路由实例对象
const router=createRouter({
    // 通过history属性指定路由的工作模式
    history:createWebHashHistory(),
    routes:[
        {path:'/home',component:Home},
        {path:'/about',component:About},
        {path:'/movie',component:Movie},
    ]
});

④ 向外共享路由实例对象

export default router;

⑤ 在 main.js 中导入并挂载路由模块

import { createApp } from 'vue'
import App from './components/02.start/App.vue'
import './index.css'
// 1.导入路由模块
import router from './components/02.start/router.js'

const app=createApp(App);

// 2.使用路由模块
// app.use()方法用于挂载路由模块
app.use(router);

app.mount('#app');

路由重定向

路由重定向指的是:用户在访问地址 A 的时候,强制用户跳转到地址 C ,从而展示特定的组件页面。
通过路由规则的 redirect 属性,指定一个新的路由地址,可以很方便地设置路由的重定向:

const router=createRouter({
    // 通过history属性指定路由的工作模式
    history:createWebHashHistory(),
    routes:[
        // 访问根路径时,将页面重定向到Home页面
        {path:'/',redirect:Home},
        {path:'/home',component:Home},
        {path:'/about',component:About},
        {path:'/movie',component:Movie},
    ]
});

路由高亮

可以通过如下的两种方式,将激活的路由链接进行高亮显示:

① 使用默认的高亮 class 类

② 自定义路由高亮的 class 类

1.自定义路由高亮的 class 类

被激活的路由链接,默认会自动应用一个叫做 router-link-active 的类名。开发者可以使用此类名选择器,为激活的路由链接设置高亮的样式:

Vue路由3.x和4.x学习笔记_第11张图片

/*可以在index.css 为router-link-active设置样式*/
.router-link-active{
  background-color: red;
  color:white;
  font-weight: bold;
}

2.自定义路由高亮的 class 类

在创建路由的实例对象时,开发者可以基于 linkActiveClass 属性,自定义路由链接被激活时所应用的类名:

// 创建路由实例对象
const router=createRouter({
    // 通过history属性指定路由的工作模式
    history:createWebHashHistory(),
    linkActiveClass:'active-router',
    routes:[
        // 访问根路径时,将页面重定向到Home页面
        {path:'/',redirect:Home},
        {path:'/home',component:Home},
        {path:'/about',component:About},
        {path:'/movie',component:Movie},
    ]
});

嵌套路由

通过路由实现组件的嵌套展示,叫做嵌套路由。

Vue路由3.x和4.x学习笔记_第12张图片

① 声明子路由链接和子路由占位符

② 在父路由规则中,通过 children 属性嵌套声明子路由规则

1. 声明子路由链接和子路由占位符

在 About.vue 组件中,声明 tab1 和 tab2 的子路由链接以及子路由占位符。示例代码如下:


2.通过 children 属性声明子路由规则

在 router.js 路由模块中,导入需要的组件,并使用 children 属性声明子路由规则。示例代码如下:

import Tab1 from './Tab1.vue';
import Tab2 from './Tab2.vue';

// 创建路由实例对象
const router = createRouter({
    // 通过history属性指定路由的工作模式
    history: createWebHashHistory(),
    routes: [
        // 访问根路径时,将页面重定向到Home页面
        { path: '/', redirect: '/home' },
        { path: '/home', component: Home },
        {
            path: '/about',
            component: About,
            // 通过children属性嵌套子级路由规则
            children: [
                {path:'tab1',component:Tab1},
                {path:'tab2',component:Tab2},
            ]
        },
        { path: '/movie', component: Movie },
    ]
});

children属性下的path,要么写完整路径/about/tab1,要么直接写tab1

注意,以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套,而不必使用嵌套的 URL。

动态路由匹配

1.动态路由匹配概念

动态路由指的是:把 Hash 地址中可变的部分定义为参数项,从而提高路由规则的复用性。在 vue-router 中使用英文的冒号(:)来定义路由的参数项。示例代码如下:

电影1 
电影2 
电影3 
//路由中的动态参数 以: 声明,冒号后面的是自定的参数名称
{path:'/movie/:id',component:Moive}

//就将以下的三个规则合并成了一个,提高复用性
{path:'/movie/1',component:Moive}
{path:'/movie/2',component:Moive}
{path:'/movie/3',component:Moive}

2.$route.params 参数对象

通过动态路由匹配的方式渲染出来的组件中,可以使用 $route.params 对象访问到动态匹配的参数值




3.使用 props 接收路由参数

为了简化路由参数的获取形式,vue-router 允许在路由规则中开启 props 传参。示例代码如下:

//1.在定义路由规则时,声明props:true
// 即可在movie组件中,以props形式接收被路由规则匹配的参数
{ path: '/movie/:id', component: Movie,props:true }




路由规则中props的值是对象类型

如果 props是一个对象,它会被按原样设置为组件属性,此时路径中的id已经不能访问了。(如果props设置为true,route.params才会被设置为组件的属性)

// 创建路由实例对象
const router = new VueRouter({
    // routes是路由规则数组
    routes: [
        // 如果 props是一个对象,它会被按原样设置为组件属性
        { path: '/user/:id', component: User,props:{uname:'lisi',age:20}},
    ]
})
const User = {
    props: ['id', 'uname', 'age'],
    // 此时的id并没有传值,需要使用$route.params.id才行
    template: `

user 组件---Id:{{id}}--id:{{$route.params.id}}--{{uname}}--{{age}}

`
}

最终效果:

image-20210803134627526

props的值为函数类型

形参route的值等于 route.params,即path中的动态参数。

Vue路由3.x和4.x学习笔记_第13张图片

const User = {
    props: ['id', 'uname', 'age'],
    template: `

user 组件---Id:{{id}}--id:{{$route.params.id}}--{{uname}}--{{age}}

`
}
// 创建路由实例对象
const router = new VueRouter({
    // routes是路由规则数组
    routes: [
        // 如果 props是一个对象,它会被按原样设置为组件属性
        {
            path: '/user/:id',
            component: User,
            props: (route) => { return {uname:'zhangsan',age:20,id:route.params.id} }
        },
    ]
})

Vue路由3.x和4.x学习笔记_第14张图片

编程式导航

通过调用 API 实现导航的方式,叫做编程式导航。与之对应的,通过点击链接实现导航的方式,叫做声明式导航。例如:

1.vue-router 中的编程式导航 API

vue-router 提供了许多编程式导航的 API,其中最常用的两个 API 分别是:

① this.$router.push(‘hash 地址’)

  • 跳转到指定 Hash 地址,从而展示对应的组件

② this.$router.go(数值 n)

  • 实现导航历史的前进、后退

2 $router.push

调用 this.$router.push() 方法,可以跳转到指定的 hash 地址,从而展示对应的组件页面。示例代码如下:




3.$router.go

调用 this.$router.go() 方法,可以在浏览历史中进行前进和后退。示例代码如下:




命名路由

**通过 name 属性为路由规则定义名称的方式,叫做命名路由。**示例代码如下:

注意:命名路由的 name 值不能重复,必须保证唯一性!

6.1 使用命名路由实现声明式导航

标签动态绑定 to 属性的值,并通过 name 属性指定要跳转到的路由规则。期间还可以用params 属性指定跳转期间要携带的路由参数。示例代码 如下:

// 在router.js中给路由命名为mov
{name:'mov' ,path: '/movie/:id', component: Movie,props:true },

//============


6.2 使用命名路由实现编程式导航

调用 push 函数期间指定一个配置对象,name 是要跳转到的路由规则、params 是携带的路由参数:




导航守卫

导航守卫可以控制路由的访问权限。示意图如下:

Vue路由3.x和4.x学习笔记_第15张图片

1.声明全局导航守卫

全局导航守卫会拦截每个路由规则,从而对每个路由进行访问权限的控制。可以按照如下的方式定义全局导航守卫:

// 创建路由实例对象
const router=createRouter({...});
// 调用路由实例对象的beforeEach函数,声明“全局前置守卫”
// fn 必须是一个函数,每次拦截到路由的请求,必须调用fn进去处理
// 因此fn叫做“守卫访问”

router.beforeEach(()=>{
    console.log('ok');
});

2.守卫方法的 3 个形参

全局导航守卫的守卫方法中接收 3 个形参,格式为:

// 创建路由实例对象
const router=createRouter({...});
                           
// 全局前置守卫
router.beforeEach((to,from,next)=>{
    // to 目标路由对象
    // from 当前导航正要离开的路由对象
    // next 是一个函数,表示放行
    console.log(to,from);
    //
})

打印to和from的结果:

Vue路由3.x和4.x学习笔记_第16张图片

注意:
① 在守卫方法中如果不声明 next 形参,则默认允许用户访问每一个路由

在守卫方法中如果声明了 next 形参,则必须调用 next() 函数,否则不允许用户访问任何一个路由!

3.next 函数的 3 种调用方式

参考示意图,分析 next 函数的 3 种调用方式最终导致的结果:

Vue路由3.x和4.x学习笔记_第17张图片

  • 直接放行:next();
  • 强制其停留在当前页面:next(false);
  • 强制其跳转到其他页面如:next(’/login’)
const router=createRouter({...});

// 全局导航守卫
router.beforeEach((to,from,next)=>{
    // to为将要访问的页面
    // from从哪个页面来的
    
    if(to.path==='/main'){
        // 如果用户要访问后台页面

        // next(false)强制用户停留在当前页面
        next(false);
    }else{
        // 用户访问的不是后台页面
        // next() 直接放行
        next();
    }
});
const router=createRouter({...});

// 全局导航守卫
router.beforeEach((to,from,next)=>{
    // to为将要访问的页面
    // from从哪个页面来的
    
    if(to.path==='/main'){
        // 如果用户要访问后台页面
        // 跳转到登录页面
        next('/login');
    }else{
        // 用户访问的不是后台页面
        // next() 直接放行
        next();
    }
});

4.结合 token 控制后台主页的访问权限

router.beforeEach((to,from,next)=>{
// 获取本地存储的token值
const tokenStr=localStorage.getItem('token');
    if(to.path==='/main'&&!tokenStr){
        // 如果用户要访问后台页面且不存在token时
        // 跳转到登录页面
        next('/login');
    }else{
        // 用户访问的不是后台页面
        // next() 直接放行
        next();
    }
});

你可能感兴趣的:(前端学习,Vue,路由,Vue-router,router,前端)