vue-router 的设置步骤 vue-router基础@stage3---week2--day5

2023-10-18 12:30
文章标签 基础 设置 步骤 vue router day5 week2 stage3

本文主要是介绍vue-router 的设置步骤 vue-router基础@stage3---week2--day5，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue-router [版本 3.x]

SPA （ single page App ） 单页面应用

对应着 多页面应用

  • 有多个 html 文件，通过 a 标签的连接联通各个页面
  • 缺点
    • 开发起来太冗余，编译、压缩很耗时间
    • 页面之间的跳转速度太慢，这个时候就会出现一个严重的问题，白屏
  1. 单页面应用
    • 不需要刷新页面，因为它就是一个页面
    • 这个页面内容在切换
    • 单页面内容之间的切换要想实现我们就是用路由了
    • 如今我们的 app、后台管理系统 主要的开发形式就是 spa
vue路由功能图示

vue-router-基础

src 目录下

  1. 在 components 文件夹写一个单页面组件 Navs.vue,并将其导出 Navs 的选项(ES6 的 module 模块化)
<template><article class="container"><section class="row"><!-- 导航区域 --><nav class="nav nav-pills flex-column flex-sm-row"><router-linkclass="flex-sm-fill text-sm-center nav-link"active-class="active"keep-alivetag="span"to="/home">首页</router-link><router-linkclass="flex-sm-fill text-sm-center nav-link"active-class="active"keep-alivetag="span"to="/category">分类</router-link><router-linkclass="flex-sm-fill text-sm-center nav-link"active-class="active"keep-alivetag="span"to="/recommend">推荐</router-link><router-linkclass="flex-sm-fill text-sm-center nav-link"active-class="active"keep-alivetag="span"to="/shopcar">购物车</router-link><router-linkclass="flex-sm-fill text-sm-center nav-link"active-class="active"keep-alivetag="span"to="/mine">个人中心</router-link></nav></section>·<!-- 路由展示区 --><section class="row"><router-view></router-view></section></article>
</template><script>export default {name: "Navs"};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus"></style>
  1. 在 App.vue 中导入 Navs,在 App 的组件中注册，并在其模版中添加标签
<template><div id="app"><img alt="Vue logo" src="./assets/logo.png" /><Navs /></div>
</template><script>import Navs from "./components/Navs.vue";export default {name: "app",components: {Navs}};
</script>
<style lang="stylus"></style>
  1. 创建路由的配置文件: 新建一个 router 文件夹，写入一个 index.js 文件,进行路由配置

    需要提前下载 vue-router
    $ yarn add vue-router

Vue 路由模式
vue 路由的 mode(模式)有几种， 分别是什么？在那些环境下运行？

  • hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。 #/home
  • history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】 /home
  • abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。【 这个模式不常用 】
  • hash/history 常用于浏览器端，abstract 用于服务端
//导入vue模块
import Vue from "vue";//导入vue-router模块
import VueRouter from "vue-router";//需要在router 文件夹 下写入一个routes.js文件(路由表)，以便在此处导入
//导入路由表
import routes from "./routes";//使用中间件
Vue.use(VueRouter);//实例化VueRouter
const router = new VueRouter({mode: "history", //路由模式routes //引入路由表
});//导出router模块
export default router;
//需要在main.js引用；
  1. 在 router 文件夹下面写入 routers.js 路由表文件
//导入路由文件模块
//需要后面的写入
import Home from "../pages/home";import Category from "../pages/category";import Recommend from "../pages/recommend";import ShopCar from "../pages/shopcar";import Mine from "../pages/mine";const routes = [{path: "/home", //路由路径component: Home //当前路由路径对应的组件},{path: "/category", //路由路径component: Category //当前路由路径对应的组件},{path: "/recommend", //路由路径component: Recommend //当前路由路径对应的组件},{path: "/shopcar", //路由路径component: ShopCar //当前路由路径对应的组件},{path: "/mine", //路由路径component: Mine //当前路由路径对应的组件}
];// 导出模块export default routes;
  1. router 文件夹中的 index.js 需要在入口文件 main.js 中导入使用
    入口文件 main.js 中引入路由实例 router , 然后在根实例中注册
import Vue from "vue";
import App from "./App.vue";
import router from "./router";Vue.config.productionTip = false;new Vue({render: h => h(App),router //在根实例中注入路由
}).$mount("#app");
  1. 现在来处理第 4 步未处理的 pages 下的路由页面，首先创建 pages 文件夹，
    6.1 在 pages 文件夹下面，创建 home 文件夹，并在其内写入 index.vue
<template><article><div><p>Home页面</p></div></article>
</template><script>export default {name: "Home"};
</script><style></style>

6.2 在 pages(放页面组件的地方) 文件夹下面，创建 category 文件夹，并在其内写入 index.vue

<template><article><div><p>Category页面</p></div></article>
</template><script>export default {name: "Category"};
</script><style></style>
  1. 用 router-view 组件来接受 routes 配置中的 component 选项: 在 App.vue 或 components 文件夹下的 Navs 或其他模版中使用
<router-view></router-view>

components 文件夹下的 Navs.vue

<template><article class="container"><section class="row"><!-- 导航区域 --><nav class="nav nav-pills flex-column flex-sm-row"><router-linkclass="flex-sm-fill text-sm-center nav-link"active-class="active"keep-alivetag="span"to="/home">首页</router-link><router-linkclass="flex-sm-fill text-sm-center nav-link"active-class="active"keep-alivetag="span"to="/category">分类</router-link><router-linkclass="flex-sm-fill text-sm-center nav-link"active-class="active"keep-alivetag="span"to="/recommend">推荐</router-link><router-linkclass="flex-sm-fill text-sm-center nav-link"active-class="active"keep-alivetag="span"to="/shopcar">购物车</router-link><router-linkclass="flex-sm-fill text-sm-center nav-link"active-class="active"keep-alivetag="span"to="/mine">个人中心</router-link></nav></section>·<!-- 路由展示区 --><section class="row"><router-view></router-view></section></article>
</template><script>export default {name: "Navs"};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus"></style>

  1. 我们可以使用 router-link 组件 进行页面跳转

    components 文件夹下的 Navs.vue

    • router-link 组件身上加 to 属性 ， to 属性的属性值 为 routes 配置中的 path 选项
    • router-link 组件默认会解析为 a 标签
    • router-link 组件加 tag 属性可以解析为 任何标签
    • router-link 组件加 active-class 属性 可以实现路由激活
    • router-link 组件加 keep-alive 属性， 可以实现路由组件的动态缓存

  2. 如果你使用的是 hash , 那么a标签就可以了、

  3. 如果你使用 history , 那么我们最好将a标签改成 router-link 这个组件

    • router-link 这个组件 身上必须要有一个 to 属性
    • router-link 这个组件身上加一个 keep-alive属性可以进行浏览器缓存

    案例看上一个即可

9.当页面第一次的打开的时候， 需要做一个重定向， 就是要自动跳转到 /home 这个路由上
在 router 文件夹下 routes.js 文件下，

import Home from "../pages/home";import Category from "../pages/category";import Recommend from "../pages/recommend";import ShopCar from "../pages/shopcar";import Mine from "../pages/mine";const routes = [{path: "/", //要求这个路由的配置要放在路由表的最上方redirect: "/home" //重定向},{path: "/home", //路由路径component: Home //当前路由路径对应的组件},{path: "/category", //路由路径component: Category //当前路由路径对应的组件},{path: "/recommend", //路由路径component: Recommend //当前路由路径对应的组件},{path: "/shopcar", //路由路径component: ShopCar //当前路由路径对应的组件},{path: "/mine", //路由路径component: Mine //当前路由路径对应的组件}
];// 导出模块export default routes;
  1. 业务： 错误路由匹配

在 router 文件夹下 routes.js 文件下，
错误路由匹配，vue 规定这个必须放在最下面，它必须将上面的路由全找一遍，找不到才用当前这个

import Home from "../pages/home";import Category from "../pages/category";import Recommend from "../pages/recommend";import ShopCar from "../pages/shopcar";import Mine from "../pages/mine";const routes = [{path: "/", //路由路径redirect: "/home"},{path: "/home", //路由路径component: Home //当前路由路径对应的组件},{path: "/category", //路由路径component: Category //当前路由路径对应的组件},{path: "/recommend", //路由路径component: Recommend //当前路由路径对应的组件},{path: "/shopcar", //路由路径component: ShopCar //当前路由路径对应的组件},{path: "/mine", //路由路径component: Mine //当前路由路径对应的组件},{path: "/error", //路由路径component: Error //当前路由路径对应的组件},{path: "**", //错误路由匹配，vue规定这个必须放在最下面，它必须将上面的路由全找一遍，找不到才用当前这个redirect: "/error" //重定向}
];// 导出模块export default routes;
  1. 二级路由
  • 注意： 写好配置之后，不要忘记了， 在对应的一级路由的组件中书写 路由展示区域
import Home from '../pages/home';import Category from '../pages/category';import Recommend from '../pages/recommend';import ShopCar from '../pages/shopcar';import Mine from '../pages/mine';import Error from '../pages/error';import Zhy from '../pages/home/children/zhy.vue';import Lsy from '../pages/home/children/lsy.vue';const routes = [{path: '/', //路由路径redirect: '/home'},{path: '/home', //路由路径component: Home, //当前路由路径对应的组件children: [{path: 'zhy', //这里不写‘/’component: Zhy},{path: 'lsy',component: Lsy}]},{path: '/category', //路由路径component: Category //当前路由路径对应的组件},{path: '/recommend', //路由路径component: Recommend //当前路由路径对应的组件},{path: '/shopcar', //路由路径component: ShopCar //当前路由路径对应的组件},{path: '/mine', //路由路径component: Mine //当前路由路径对应的组件},{path: '/error', //路由路径component: Error //当前路由路径对应的组件},{path: '**', //错误路由匹配，vue规定这个必须放在最下面，它必须将上面的路由全找一遍，找不到才用当前这个redirect: '/error' //重定向},];// 导出模块export default routes;

pages>home>home.vue
注意： to="/home/zhy"

<template><article><div><p>Home页面</p><router-link class="flex-sm-fill text-sm-center nav-link" active-class="active" keep-alive tag="span" to="/home/zhy" > 张浩雨么么哒 </router-link><router-link class="flex-sm-fill text-sm-center nav-link" active-class="active" keep-alive tag="span" to="/home/lsy" > 李山雨么么哒 </router-link></div><!-- <Zhy></Zhy> --><router-view></router-view></article>
</template><script>
import Zhy from './children/zhy';
import Lsy from './children/lsy';
export default {name:'Home',components:{Zhy,Lsy}
};
</script><style>
</style>

12.命名路由

  • 作用： 就是简写路径了
         {path: '/shopcar',component: Shopcar,//子路由 children: [{ path: 'yyb', // 容易犯错点  /yyb X component: Yyb,name: 'yyb' //命名路由},{path: 'junge',component: Junge}]},
  • 使用： 单项数据绑定to属性
        <router-link :to = "{name:'yyb'}"/>

重定向

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

const router = new VueRouter({routes: [{ path: '/a', redirect: '/b' }]
})

重定向的目标也可以是一个命名的路由：

const router = new VueRouter({routes: [{ path: '/a', redirect: { name: 'foo' }}]
})

甚至是一个方法，动态返回重定向目标：

const router = new VueRouter({routes: [{ path: '/a', redirect: to => {// 方法接收 目标路由 作为参数// return 重定向的 字符串路径/路径对象}}]
})

注意导航守卫并没有应用在跳转路由上，而仅仅应用在其目标上。

别名

“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么“别名”又是什么呢？
/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
上面对应的路由配置为：

const router = new VueRouter({routes: [{ path: '/a', component: A, alias: '/b' }]
})

“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。

编程式的导航

  • 除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
router.push(location, onComplete?, onAbort?)

注意：在 Vue 实例内部，你可以通过 r o u t e r 访 问 路 由 实 例 。 因 此 你 可 以 调 用 < f o n t > t h i s . router 访问路由实例。因此你可以调用 <font>this. router访问路由实例。因此你可以调用<font>this.router.push。

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

  • 当你点击 时，这个方法会在内部调用，所以说，点击 等同于调用 router.push(…)。

    声明式编程式
    < router-link :to="…">router.push(…)

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

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

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

同样的规则也适用于 router-link 组件的 to 属性。

router.replace(location, onComplete?, onAbort?)

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

声明式编程式
< router-link :to="…" replace>router.replace(…)
router.go(n)

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

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)// 后退一步记录，等同于 history.back()
router.go(-1)// 前进 3 步记录
router.go(3)// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

这篇关于vue-router 的设置步骤 vue-router基础@stage3---week2--day5的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/232575。

相关文章

PostgreSQL 默认隔离级别的设置

PostgreSQL 默认隔离级别的设置

《PostgreSQL默认隔离级别的设置》PostgreSQL的默认事务隔离级别是读已提交,这是其事务处理系统的基础行为模式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一 默认隔离级别概述1.1 默认设置1.2 各版本一致性二 读已提交的特性2.1 行为特征2.2
阅读更多...
一文详解MySQL如何设置自动备份任务

一文详解MySQL如何设置自动备份任务

《一文详解MySQL如何设置自动备份任务》设置自动备份任务可以确保你的数据库定期备份,防止数据丢失,下面我们就来详细介绍一下如何使用Bash脚本和Cron任务在Linux系统上设置MySQL数据库的自... 目录1. 编写备份脚本1.1 创建并编辑备份脚本1.2 给予脚本执行权限2. 设置 Cron 任务2
阅读更多...
Python UV安装、升级、卸载详细步骤记录

Python UV安装、升级、卸载详细步骤记录

《PythonUV安装、升级、卸载详细步骤记录》：本文主要介绍PythonUV安装、升级、卸载的详细步骤,uv是Astral推出的下一代Python包与项目管理器,主打单一可执行文件、极致性能... 目录安装检查升级设置自动补全卸载UV 命令总结 官方文档详见：https://docs.astral.sh/
阅读更多...
mtu设置多少网速最快? 路由器MTU设置最佳网速的技巧

mtu设置多少网速最快? 路由器MTU设置最佳网速的技巧

《mtu设置多少网速最快?路由器MTU设置最佳网速的技巧》mtu设置多少网速最快？想要通过设置路由器mtu获得最佳网速，该怎么设置呢？下面我们就来看看路由器MTU设置最佳网速的技巧... 答：1500 MTU值指的是在网络传输中数据包的最大值，合理的设置MTU 值可以让网络更快！mtu设置可以优化不同的网
阅读更多...
Python pip下载包及所有依赖到指定文件夹的步骤说明

Python pip下载包及所有依赖到指定文件夹的步骤说明

《Pythonpip下载包及所有依赖到指定文件夹的步骤说明》为了方便开发和部署,我们常常需要将Python项目所依赖的第三方包导出到本地文件夹中,：本文主要介绍Pythonpip下载包及所有依... 目录步骤说明命令格式示例参数说明离线安装方法注意事项总结要使用pip下载包及其所有依赖到指定文件夹，请按照以
阅读更多...
使用jenv工具管理多个JDK版本的方法步骤

使用jenv工具管理多个JDK版本的方法步骤

《使用jenv工具管理多个JDK版本的方法步骤》jenv是一个开源的Java环境管理工具,旨在帮助开发者在同一台机器上轻松管理和切换多个Java版本,：本文主要介绍使用jenv工具管理多个JD... 目录一、jenv到底是干啥的？二、jenv的核心功能（一）管理多个Java版本（二）支持插件扩展（三）环境隔
阅读更多...
从基础到进阶详解Pandas时间数据处理指南

从基础到进阶详解Pandas时间数据处理指南

《从基础到进阶详解Pandas时间数据处理指南》Pandas构建了完整的时间数据处理生态,核心由四个基础类构成,Timestamp,DatetimeIndex,Period和Timedelta,下面我... 目录1. 时间数据类型与基础操作1.1 核心时间对象体系1.2 时间数据生成技巧2. 时间索引与数据
阅读更多...
MySQL 设置AUTO_INCREMENT 无效的问题解决

MySQL 设置AUTO_INCREMENT 无效的问题解决

《MySQL设置AUTO_INCREMENT无效的问题解决》本文主要介绍了MySQL设置AUTO_INCREMENT无效的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参... 目录快速设置mysql的auto_increment参数一、修改 AUTO_INCREMENT 的值。
阅读更多...
详解Linux中常见环境变量的特点与设置

详解Linux中常见环境变量的特点与设置

《详解Linux中常见环境变量的特点与设置》环境变量是操作系统和用户设置的一些动态键值对,为运行的程序提供配置信息,理解环境变量对于系统管理、软件开发都很重要,下面小编就为大家详细介绍一下吧... 目录前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变
阅读更多...
java对接海康摄像头的完整步骤记录

java对接海康摄像头的完整步骤记录

《java对接海康摄像头的完整步骤记录》在Java中调用海康威视摄像头通常需要使用海康威视提供的SDK,下面这篇文章主要给大家介绍了关于java对接海康摄像头的完整步骤,文中通过代码介绍的非常详细,需... 目录一、开发环境准备二、实现Java调用设备接口（一）加载动态链接库（二）结构体、接口重定义1.类型
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2