vue-router详解

已于 2022-07-03 17:02:55 修改
阅读量330 收藏
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
于 2022-07-03 17:01:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hiyiin/article/details/125586453
版权

1 vue-router相关理解

1.1 通过生活中的路由器初步理解

image-20220701171406570

1.2 vue-router的理解

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

1.3 SPA应用

1.3.1 SPA应用定义

SPA应用就是单页的web应用（single page web application）

1.3.2 SPA应用的特点

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

1.4 路由的理解

1.4.1 什么是路由

  1. 一个路由就是一组映射关系（key-value）
  2. key为路径，value可能是function或component

1.4.2 路由的分类

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

2 基本路由

2.1 基本路由的使用

  1. 安装vue-router，命令：npm i vue-router@3(**注意：**不加@3安装的是4.x版本的路由，vue2只支持3.x版本路由，vue3才支持4.x版本的路由)

  2. 创建路由配置文件/src/router/index.js

  3. 应用插件：Vue.user(VueRouter)

  4. 在/src/router/index.js中编写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
        },
    ]
})

  5. 实现切换(active-class可配置高亮样式)

    <router-link to="/about">About</router-link>

  6. 指定展示位置

    <router-view></router-view>

2.2 使用注意

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

3 嵌套路由（多级路由）

  1. 配置路由规则，在父路由中使用children配置项

    routes: [
    {
        path: "/about",
        component: About
    },
    {
        path: "/home",
        component: Home,
        children: [
            {
                path: 'news',
                component: News,
            },
            {
                path: 'message',
                component: Message,
            }
        ]
    },
]

  2. 跳转（要写完整路径）

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

4 路由的query参数

  1. 传递参数

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

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

  2. 接收参数

    {{$route.query.id}}
{{$route.query.title}}

5 命名路由

  1. 作用：当全路径过长时，可以简化路由的跳转

  2. 如何使用

    1. 给路由取名：(名字可随便取，但最好的方式是和路径名一样)

      {
    name: 'message',
    path: 'message',  //此处一定不要写：/message
    component: Message,
    children: [
        {
            name: 'detail',
            path: 'detail',
            component: Detail
        },
    ]
}

    2. 简化跳转

      <!-- 简化前：需要写完整路径 -->
<router-link to="/home/message/detail">跳转</router-link>

<!-- 简化后：直接通过名字跳转 -->
<router-link :to="{name:'detail'}">跳转</router-link>

<!-- 简化写法配合传递参数 -->
<router-link :to="{
    name: 'detail',
    query: {
        id: m.id,
        title: m.title
    }
}">{{ m.title }}</router-link>

6 路由的params参数

  1. 配置路由，声明接收params参数

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

  2. 传递参数

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

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

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

  3. 接收参数：

    {{$route.params.id}}
{{$route.params.title}}

7 路由的props配置

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

{
    name: 'detail',
    path: 'detail/:id/:title', //使用占位符声明接收params参数
    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
        }
    }
}

8 <router-link>的replace属性

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

9 编程式路由导航

  1. 作用：不借助<router-link>实现路由的跳转，让路由跳转更加灵活

  2. 具体编码：

    //$router的两个API
this.$router.push({
    name: 'detail',
    params: {
        id: xxx,
        title: xxx
    }
})

this.$router.replace({
    name: 'detail',
    params: {
        id: xxx,
        title: xxx
    }
})

this.$router.back() //控制浏览器后退一步
this.$router.forward() //控制浏览器前进一步
this.$router.go(n) //控制浏览器前进n步（n为负数则后退）

10 缓存路由组件

  1. **作用：**让不展示的路由组件保持挂载，不被销毁

  2. 具体编码：

    <keep-alive include="NewsComponent">
    <router-view></router-view>
</keep-alive>

11 两个新的生命周期钩子

  1. 作用：路由组件所独有的两个生命周期钩子，用于捕获路由组件的激活状态。
  2. 具体名字：
    1. activated路由组件被激活时触发。
    2. deactivated路由组件被激活时触发。

12 路由守卫

12.1 作用与分类

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

12.2 路由守卫使用

  1. 全局守卫

    // 全局前置路由守卫——初始化的时候和每次路由切换之前被调用
router.beforeEach((to, from, next) => {
    console.log("前置路由守卫", to, from)
    if (to.meta.isAuth) { //判断当前路由是否需要进行权限控制
        // 权限控制相关代码
        if (localStorage.getItem('school') === "ycu") {
            next()
        } else {
            alert("权限不足，无法查看")
        }
    } else {
        next()
    }

})

// 全局后置路由守卫——初始化的时候和每次路由切换之后被调用
router.afterEach((to, from) => {
    console.log("后置路由守卫", to, from)
    document.title = to.meta.title || "Vue路由案例"
})

  2. 独享守卫

    beforeEnter: (to, from, next) => {
    if (to.meta.isAuth) { //判断当前路由是否需要进行权限控制
        // 权限控制相关代码
        if (localStorage.getItem('school') === "ycu") {
            next()
        } else {
            alert("权限不足，无法查看")
        }
    } else {
        next()
    }
}

  3. 组件内路由守卫

    // 通过路由规则进入该组件时被调用
beforeRouteEnter(to, from, next) {
},
// 通过路由规则离开该组件时被调用
beforeRouteLeave(to, from, next) {
    document.title = to.meta.title || "Vue路由案例" //改页签标题不生效
}

13 路由器的工作模式

13.1 什么是url中的hash值？

对于一个url来说，#及其后面的内容就是hash值

13.2 url中hash值的特点

hash值不会包含在HTTP请求中，即：hash值不会带给服务器

13.3 两种工作模式的特点

  • hash模式：
    • 地址中永远带着#号，不美观。
    • 若以后将地址通过第三方手机app分析，若app校验严格，则地址会被标记为不合法
    • 兼容性较好
  • history模式：
    • 地址干净，美观
    • 兼容性和hash模式相比略差
    • 应用部署上线时需要后端人员支持，解决刷新页面服务器404的问题
Hiyiin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-router实现tab标签页（单页面）详解
08-29
Vue Router 实现 Tab 标签页（单页面）详解 Vue Router 是 Vue.js 官方的路由插件，适合用于构建标签页应用。Vue 的标签页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来，vue-router 会把...
vue-router 起步步骤详解
10-17
我们首先需要从 vue-router 包中导入 VueRouter 对象，然后导入我们需要路由的组件。在 Vue 项目中，main.js 通常是应用的入口文件，我们在这里进行各种初始化配置。 ```javascript import VueRouter from 'vue-...
如何创建vue3项目
X0923aini的博客
08-24 1447
创建vue3项目
Vue的router详解
Litt_White的博客
08-20 4899
vue-router参数配置，vue-router的相对路径和绝对路径，带/和不带/的区别，vue-router路由的嵌套使用，vue-router的路由传参，keep-alive的使用，vue-router动态添加路由，删除路由，vue-router导航守卫的使用
vue-router的使用方法以及含参数的配置
weixin_30332241的博客
10-20 313
html router-link：跳转链接 参数to：就是跳转到的链接位置 二层链接 eg： <router-link to="/users/evan">/users/evan</router-link>需要配置所对应的对应的childrenchildren所对应的参数path：可分我固定的参数url 和带参数的 区别于 ：（冒号）name：对应的参数的模块名称（...
Vue-router路由组件传参
weixin_48723799的博客
06-06 477
正常情况下我们通用的传参方式主要是有一下两种方式： 除了上面的，其实还有另外三种方式：1.布尔模式、通过 props 解耦 2.对象模式、如果 是一个对象，它会被按原样设置为组件属性。当 是静态的时候有用。 3.函数模式、你可以创建一个函数返回 。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。 URL 会将 作为属性传递给 组件。请尽可能保持 函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义 ，请使用包装组件，这样 Vue 才可以对状态
RouteComponent 路由组件
衣乌安、随笔
12-29 8848
  route component（路由组件） 指的是一个直接被 route（路由）（例如 &lt;Route component&gt;）渲染出的 component（组件）。router（路由器）会从路由组件中创建元素，并且把它们作为 this.props.children 提供给上一层的路由组件。除了 children，路由组件还会接收以下props： router – router...
vue-router 中 meta的用法详解
01-21
在使用Vue.js框架开发单页面应用（SPA）时，经常会利用vue-router插件来管理页面的路由。在vue-router中，meta字段是路由对象的一个属性，用于添加自定义信息，比如权限控制、页面标题等。下面将详细介绍meta的用法...
07-vue-router详解.pdf
09-18
Vue-router是Vue.js官方的路由插件，它与Vue.js深度集成，非常适合构建单页面应用。Vue-router基于路由和组件，可以将访问路径映射到组件，实现页面路径变更时组件的切换。要使用Vue-router，首先需要通过npm来安装...
详解vue-router的导航钩子(导航守卫)
01-21
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { ... ... }) 其中： to：将要访问的路径 from：代表从哪个路径跳转来的 next：是一个函数，表示放行。有如下几种调用方式
react-router 的参数render、component、children
qq_35872379的博客
07-30 1075
component 最常用，只有匹配 location 才会加载 component 对应的 React组件 render 路由匹配函数就会调用 children 不管路由是否匹配都会渲染对应组件 优先级：children>component>render React 核心渲染代码 return ( <RouterContext.Provider value={props}> {match // 是否与地址匹配
vue-router之路由属性配置说明（十）
weixin_33775572的博客
05-08 3123
代码如下：exportdefaultnewRouter({ mode:'history',//路由模式，取值为history与hash base:'/',//打包路径，默认为/，可以修改 routes:[ { path:string,//路径 ccomponent:Component;//...
vue-router当中内置component标签(组件)的使用
动感超人的博客
10-28 2728
可以传入字符串,也可以传入组件。
weblogic中servlet报404_weblogic中ServletActionContext.getServletContext().getRealPath("/")空指针的解决...
weixin_39652136的博客
12-21 667
问题：在weblogic war 路径 getServletContext().getRealPath()和request.getRealPath，weblogic获取路径总是为NULL，怎么破？？？？？通常情况下载tomcat中，我们以前使用 HttpServletRequest request;request.getRealPath(arg0)但是这是个方法已经过时了。。。。。。。。reque...
【Vue基础系列】vue-router 万字详解，一篇彻底搞懂
pakerder的博客
11-25 1916
我们在生活中经常听到路由器，但关于路由可能不太了解。其实路由器就是在管理着多个路由（路由器后面的接口key，而另一端电脑或是手机等设备就是value）。 一个路由就是一组key-value的对应关系，多个路由需要经过路由器的管理。其中key为路径，value可能是function或component。 前端路由：value是component，展示页面内容。（当浏览器路径改变时，对应的组件就会显示） 后端路由：value是function，用于处理客户端
解决vue的router组件component在import时不能使用变量问题
weixin_41656074的博客
03-10 4437
webpack 编译es6 动态引入 import() 时不能传入变量，例如dir ='path/to/my/file.js' ； import(dir) , 而要传入字符串 import(‘path/to/my/file.js')，这是因为webpack的现在的实现方式不能实现完全动态。 但一定要用变量的时候，可以通过字符串模板来提供部分信息给webpack；例如import(./path/${myFile}), 这样编译时会编译所有./path下的模块，但运行时确定myFile的值才会加...
Vue router中path和component的作用
weixin_43368552的博客
05-25 4459
path是路由参数，当url路径匹配到当前路由参数时，就会跳转到component所对应的页面组件 在本例子里面：当url地址是只有/的时候，自动跳转到Home这个组件页面。相当于通过path的信息跳转到对应的component页面。 component是获取跳转页面的地址 方式一： 和引入组件一样 先把要跳转的页面引入router js文件中再进行调用 方式二： 直接在component获取要跳转页面的位置 ...
vue-router 详解
最新发布
OneBaBa的专栏
05-24 2095
to：用于指定跳转的路径tag：tag可以指定之后渲染成什么组件，比如我们下面的代码会被渲染成一个元素，而不是。replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中active-class：当对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。
Vue-Router详解
凉茶铺的博客
01-24 8107
介绍了Vue-Router的相关知识点
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值