Vue Router - 路由的使用、两种切换方式、两种传参方式、嵌套方式

小鱼儿 2024-02-21 09:35 134阅读 0赞

目录

一、Vue Router

1.1、下载

1.2、基本使用

a）引入 vue-router.js（注意：要在 Vue.js 之后引入）.

b）创建好路由规则

c）注册到 Vue 实例中

d）展示路由组件

1.3、切换路由的两种方式

1.3.1、以标签的方式切换

1.3.2、以 js 方式切换

1.3.3、在 VueRouter 中多次切换同一个路由存在问题

a）解决方法一：每次切换路由前手动判断

1.4、两种传参方式

1.4.1、通过 querystring 传参

1.4.2、通过 restful 传参

1.5、嵌套路由的使用

一、Vue Router

1.1、下载

通过 Vue Router 可以将现有的 Vue 开发更灵活，使得一个页面中展示多个不同的组件.

下载地址如下：

  1. https://unpkg.com/vue-router/dist/vue-router.js

1.2、基本使用

a）引入 vue-router.js（注意：要在 Vue.js 之后引入）.

  1. <script src="../js/vue.js"></script>
  2.     <!-- router 必须在 vue.js 之后引入 -->
  3.     <script src="../js/vue-router.js"></script>

b）创建好路由规则

  1. //1.创建路由对象
  2.         const router = new VueRouter({
  3.             //配置路由规则:
  4.             //path: 代表路由路径('#/' 这个哈希路由后面要添加的路由)
  5.             //component: 代表路由路径对应的组件
  6.             //redirect: 代表路由重定向
  7.             //path: "*" 表示匹配所有路由
  8.             routes: [
  9.                 // { path: '/', component: login }, //配置默认路由(一打开页面就有登录功能)，但是！规范不建议一个组件对应多个路由
  10.                 { path: '/', redirect: '/login' }, //因此可以通过 redirect 进行重定向
  11.                 { path: '/login', component: login },
  12.                 { path: '/reg', component: register },
  13.                 { path: '*', component: notFound } //在老的版本，这个规则必须放在最后一行，但是后续官方做了优化，放哪都可以，但是建议还是放在结尾
  14.             ]
  15.         });

在实际的项目中，component 后面最好写成 箭头函数，可以提高效率（懒汉模式，使用的时候才加载）.

最佳写法如下：

  1. //1.创建路由对象
  2.         const router = new VueRouter({
  3.             //配置路由规则:
  4.             //path: 代表路由路径('#/' 这个哈希路由后面要添加的路由)
  5.             //component: 代表路由路径对应的组件
  6.             //redirect: 代表路由重定向
  7.             //path: "*" 表示匹配所有路由
  8.             routes: [
  9.                 { path: '/', redirect: '/login' },
  10.                 { path: '/login', component: () => import('../views/Login') }, //这里的 Login 就是 Login.vue 的前缀 
  11.                 { path: '/reg', component: () => import('../views/Reg') },
  12.                 { path: '*', component: () => import('../views/404') } 
  13.             ]
  14.         });

这里定义的组件如下：

  1. const login = {
  2.             template: `<div><h2>登录功能</h2></div>`,
  3.         }
  5.         const register = {
  6.             template: `<div><h2>注册功能</h2></div>`,
  7.         }
  9.         const notFound = {
  10.             template: `<div><h2>404 not found 页面飞到外太空了~</h2></div>`,
  11.         }

c）注册到 Vue 实例中

  1. const app = new Vue({
  2.             el: "#app",
  3.             data: {
  4.                 msg: "Vue路由章节"
  5.             },
  6.             router //2.注册路由
  7.         });

d）展示路由组件

router-view 标签用来渲染组件

  1. <div id="app">
  3.         <!-- 3.展示路由组件 -->
  4.         <router-view></router-view>
  6.     </div>

1.3、切换路由的两种方式

1.3.1、以标签的方式切换

  1. <!-- 1.链接 -->
  2.         <a href="#/login">登录</a>
  3.         <a href="#/reg">登录</a>
  4.         <hr>
  5.         <!-- 2.标签  必须要有 to 属性， to="路由路径" -->
  6.         <router-link to="/login">登录</router-link>
  7.         <router-link to="/reg">注册</router-link>
  8.         <hr>
  9.         <!-- 3.标签 -->
  10.         <router-link :to="{path: '/login'}">登录</router-link>
  11.         <router-link :to="{path: '/reg'}">注册</router-link>
  12.         <hr>
  13.         <!-- 4.标签  根据路由对象 name 属性来切换路由 -->
  14.         <!-- 推荐：路由随时可能会变，而命名不会变，因此可以起到解耦合的作用 -->
  15.         <router-link :to="{name: 'Login'}">登录</router-link>
  16.         <router-link :to="{name: 'Register'}">注册</router-link>

以下是路由规则和组件

  1. const login = {
  2.             template: `<div><h1>登录功能</h1></div>`
  3.         }
  5.         const register = {
  6.             template: `<div><h1>注册功能</h1></div>`
  7.         }
  9.         //创建路由对象
  10.         const router = new VueRouter({
  11.             routes: [
  12.                 //name 表示这个路由对象的唯一身份标识
  13.                 { path: '/login', component: login, name: "Login" },
  14.                 { path: '/reg', component: register, name: "Register" },
  15.             ]
  16.         });

1.3.2、以 js 方式切换

a）例如通过点击事件，触发路由切换

  1. <button @click="loginSuccess()">一键注册成功</button>
  2.         <!-- 展示组件 -->
  3.         <router-view></router-view>

b）注册组件和创建路由规则

  1. const login = {
  2.             template: `<div><h1>登录</h1></div>`
  3.         }
  4.         const reg = {
  5.             template: `<div><h1>注册</h1></div>`
  6.         }
  7.         const router = new VueRouter({
  8.             routes: [
  9.                 { path: "/", redirect: "/reg" },
  10.                 { path: "/login", component: login, name: "Login" },
  11.                 { path: "/reg", component: reg, name: "Reg" },
  12.             ]
  13.         });

c）js 切换路由

  1. const app = new Vue({
  2.             el: "#app",
  3.             data: {
  4.                 msg: "js 切换路由"
  5.             },
  6.             methods: {
  7.                 loginSuccess() {
  8.                     // this.$router.push("/login");//不推荐
  9.                     // this.$router.push({ path: '/login' });//不推荐
  10.                     this.$router.push({ name: "Login" });//推荐使用名称切换
  11.                 }
  12.             },
  13.             router
  14.         });

1.3.3、在 VueRouter 中多次切换同一个路由存在问题

在 VueRouter 中多次切换相同路由出现错误，如下：

f13372e4b94c4f4780c139b8ea67d321.png

有两种解决办法，如下：

首先我们要知道：

  • this.$route 代表当前路由对象 route.
  • this.$router 代表路由管理器对象 VueRouter.
a）解决方法一：每次切换路由前手动判断
  1. const app = new Vue({
  2.             el: "#app",
  3.             data: {
  4.                 msg: "js 切换路由"
  5.             },
  6.             methods: {
  7.                 loginSuccess() {
  8.                     //在 VueRouter 中多次切换相同路由出现错误解决办法:
  9.                     //1.每次切换前手动判断一下(不推荐，太麻烦)
  10.                      if (this.$route.name != "Login") {
  11.                          this.$router.push({ name: "Login" });
  12.                      }
  14.                 }
  15.             },
  16.             router
  17.         });

b）解决方法二：官方配置

在创建路由规则对象之后加入如下配置

  1. //2.官方配置：解决 VueRouter 中同一路由多次切换报错问题
  2.         const original = VueRouter.prototype.push;
  3.         VueRouter.prototype.push = function push(location) {
  4.             return original.call(this, location).catch(err => err)
  5.         };

之后你就可以直接写切换路由的方法了.

  1. loginSuccess() {
  2.                     this.$router.push({ name: "Login" });
  3.                 }

1.4、两种传参方式

1.4.1、通过 querystring 传参

例如 /login?name=cyk&password=1111

a）如下四种路由传参方式（推荐最后一种）

  1. <!-- query -->
  2.         <a href="#/login?name=cyk&password=123">登录</a>
  3.         <router-link to="/login?name=cyk&password=123">登录</router-link>
  4.         <router-link :to="{path: '/login', query:{name:'cyk', password:1111}}">登录</router-link>
  5.         <router-link :to="{name: 'Login', query:{name:'cyk',password:1111}}">登录</router-link>

b）在组件中获取参数，如下：

  1. const login = {
  2.             template: `<div><h1>登录功能</h1></div>`,
  3.             created() { //生命周期：已执行完 组件内部事件 和 生命周期函数注册，自身的 data、methods、computed 属性注入和校验
  4.                 //通过 querystring 获取参数 
  5.                 console.log(this.$route); //获取当前路由对象
  6.                 console.log(this.$route.query.name);
  7.                 console.log(this.$route.query.password);
  8.             }
  9.         }

c）路由对象如下：

  1. //创建路由对象
  2.         const router = new VueRouter({
  3.             routes: [
  4.                 //querystring 传参
  5.                 { path: '/login', component: login, name: "Login" }
  6.             ]
  7.         });

1.4.2、通过 restful 传参

例如 /login/cyk/1111

a）如下三种传参方式（推荐最后一种）

  1. <!-- restful -->
  2.         <a href="#/register/6/lyj">注册</a>
  3.         <router-link :to="{path: '/register/11/lyj'}">注册</router-link>
  4.         <router-link :to="{name: 'Register', params:{id:11, name:'lyj'}}">注册</router-link>

b）在组件中获取参数，如下：

  1. const register = {
  2.             template: `<div><h1>注册功能</h1></div>`,
  3.             created() {
  4.                 //通过 restful 获取参数
  5.                 console.log(this.$route); //获取当前路由对象
  6.                 console.log(this.$route.params.id);
  7.                 console.log(this.$route.params.name);
  8.             }
  9.         }

c）路由对象如下：

  1. //创建路由对象
  2.         const router = new VueRouter({
  3.             routes: [
  4.                 //querystring 传参
  5.                 { path: '/login', component: login, name: "Login" },
  6.                 //restful 传参
  7.                 { path: '/register/:id/:name', component: register, name: "Register" },
  8.             ]
  9.         });

1.5、嵌套路由的使用

在创建 VueRouter 中，path 还有一个 children 参数，用来定义嵌套子组件路由.

例如需求：

1.现在有一个用户列表

1755b41f426546f29afee0b01e71b76d.png

2.当点击 “添加用户信息” 时，显示以下对话框

d6fe0bbed3cb4e2382fb447c6bf2d56d.png

3.点击提交后，回归用户列表路由

1755b41f426546f29afee0b01e71b76d.png

实现如下：

a）如下定义组件

  1. <template id="users">
  2.         <div>
  3.             <h3>用户列表</h3>
  4.             <router-link :to="{name:'adduser'}">添加用户信息</router-link>
  5.             <table border="1">
  6.                 <tr>
  7.                     <td>id</td>
  8.                     <td>name</td>
  9.                 </tr>
  10.                 <tr>
  11.                     <td>{
  12.    { users.id }}</td>
  13.                     <td>{
  14.    { users.name }}</td>
  15.                 </tr>
  16.             </table>
  17.             <!-- 显示嵌套子组件 -->
  18.             <router-view></router-view>
  19.         </div>
  20.     </template>
  22.     <template id="add-user">
  23.         <div>
  24.             <div>
  25.                 <span>id: </span>
  26.                 <input type="text">
  27.             </div>
  28.             <div>
  29.                 <span>name: </span>
  30.                 <input type="text">
  31.             </div>
  32.             <button @click="submit()">提交</button>
  33.         </div>
  34.     </template>
  36.     <script>
  38.         //用户列表
  39.         const users = {
  40.             template: '#users',
  41.             data() {
  42.                 return {
  43.                     users: [] //这里不能写死，需要请求后端得到参数
  44.                 }
  45.             },
  46.             created() {
  47.                 //在组件构建完成后，请求后端得到 users 的所有数据，覆盖空数组
  48.                 this.users = { id: 1, name: 'cyk' }
  49.             }
  50.         }
  52.         //添加用户
  53.         const adduser = {
  54.             template: '#add-user',
  55.             methods: {
  56.                 submit() {
  57.                     //向后端发送请求
  58.                     //提交完成后切换路由
  59.                     this.$router.push({ name: 'users' });
  60.                 }
  61.             }
  62.         }
  63.     </script>

b）创建路由对象

  1. //创建路由对象
  2.         const router = new VueRouter({
  3.             routes: [
  4.                 {
  5.                     path: '/users', component: users, name: 'users',
  6.                     children: [  //嵌套子组件路由
  7.                         //注意：嵌套路由中，子路由不能使用 / 开头
  8.                         { path: 'adduser', name: 'adduser', component: adduser } //可以通过 /users/useradd 访问到此
  9.                     ]
  10.                 },
  11.             ]
  12.         });

c）注册到 Vue 实例中

  1. const app = new Vue({
  2.             el: "#app",
  3.             component: {
  4.                 users,
  5.                 adduser
  6.             },
  7.             router
  8.         });

09e23a90bc6d49febd74c9e790fbf42c.gif

发表评论

表情：
评论列表 （有 0 条评论，134人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue路由传参的几种方式

    前言：顾名思义，vue路由传参是指嵌套路由时父路由向子路由传递参数，否则操作无效。传参方式可以划分为params传参和query传参，params传参又可以分为url中显示参数

    小咪咪小咪咪/ 0 赞/ 568 阅读