vue3.0 CLI - 3.2 路由的初级使用教程

我的 github 地址 -vue3.0Study- 阶段学习成果都会建立分支。

==========================

动态路由

在路由某部分里加入[ : ]，就成为动态路由如：/user/:id/，那么路由导航，并不是  /user/id/ 而是 /user/666/。

显然这个 id 能被获取，在组件中使用。通过 this.$route.params 获取。 this 是当前组件，$route 是路由对象，params 是一个对象字面量 { id:666 }。

$route 通过 Vue.use(Router) 和 new Vue({ router, store, render: h => h(App) }).$mount('#app') 全局依赖注入，在所有组件中都可以使用它。

1、router.js 中 path: '/about' 路由 改为 path: '/about/:id'。

2、About.vue 中 <top-nav title="军事" :class="{ active: isActive }"/> 添加红色部分。

3、About.vue 中 data 或者 computed 属性中添加 isActive: function () { return this.$route.params.id === "666"; }

4、App.vue 中 <router-link to="/about/666">VUE</router-link>

5、About.vue 中 <style lang="less"> .active { background: red; } </style>

保存点击【VUE】导航按钮，即可见到效果：

如何取得 $route 中参数的值，便是很大的进步。这个参数可以用在任何地方，可以用来做任何事情。

比如传递数据，根据路由参数动态从服务器获取组件内容等

在进行下一个内容学习之前，commit 一下。

嵌套路由(子路由)

在页面，通常存在多级导航。vue 官方网站便是多级导航的例子：顶部为一级导航栏，左侧为二级导航栏。

导航通常对应 <router-link> 而 <router-link> 与 <router-view/> 对应。

并非只有 App.vue 中才能存在 <router-view/>， 任何组件都可以。

下面把 HelloWorld.vue 变为 About.vue 的子路由：

1、<HelloWorld msg="vue 官方相关资料的链接"/> 替换为  <router-view/>

2、router.js 中关于 About.vue 组件的路由 替换为

 {
  path: '/about/:id',
  name: 'about',
  // route level code-splitting
  // this generates a separate chunk (about.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
  component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
  children: [
  {
   path: '1',
   component: HelloWorld,
   props: (router) => ({
   msg: router.query.msg
   })
  }
  ]
 }

在浏览器地址栏输入 http://localhost:8081/#/about/666/1?msg='welcome to nDos blog' 查看效果。

编程式导航与路由命名

在 vue 初始化的工程中，路由配置时，组件都已做好命名。这便是路由命名。

编程式导航，尽量使用命名的路由，如下：

router.push({ name: 'about', params: { userId: 123 }})

因为使用 path 属性进行编程式导航，params 无效。

这样使用路由跳转，使得单页面编程的路由跳转更加灵活。比如某个跳转按钮，可以绑定函数，进行条件跳转。

关于这两个的内容并不多，参照官网教程学习。

命名视图

在一个组件中，如果有多个组件出口，比如：在某个页面，需要同时展示很多个组件时。

只有一个 <router-view/> 显然不能满足需求。

多个 <router-view/> 同时存在的时候，就必须要加以区分，用的是 name 属性：<router-view name="a"/>

在 router.js 中的 components 属性中，添加多个组件即可 ( 到这里才明白为什么 components 为什么是复数形式的写法  )。

总结

以上所述是小编给大家介绍的vue3.0 CLI - 3.2 路由的初级使用教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue动态路由缓存不相互影响的解决办法

    关于react与vue中的key 之前在学习react的时候,常常遇到循环渲染组件时会提示需要在循环组件中加上key属性,比如有一组列表: import React, { Component } from 'react'; export default calss MainApp extends Component { state = { student: [ { name: 'Jenny', id: 'a001' }, { name: 'Jerry', id: 'a002' }, ] } re

  • vue路由前进后退动画效果的实现代码

    vue-route-transition vue router 切换动画 特性 模拟前进后退动画 基于css3流畅动画 基于sessionStorage,页面刷新不影响路由记录 路由懒加载,返回可记录滚动条位置 前进后退的判断与路由路径规则无关 支持任意基于Vue的UI框架 demo   手机扫码 在线预览 说明 配套包含两个组件 vue-route-transition 负责动画 router-layout 负责页面排版. 主要是解决transform动画,position:fixed异常问题

  • vue+Vue Router多级侧导航切换路由(页面)的实现代码

    当当当当当~我又来了. 在项目里经常会遇到侧导航切换页面的功能. 如果我们将侧导航做成公共组件,来调用的话,就会在每一个页面都引用该组件,在后期维护的时候比较麻烦,比如改参数. 所以此文将侧导航做成父页面组件,将切换的页面做成子页面,这样只需调用一次即可.大大减少了后期维护的麻烦 涉及功能点 侧导航支持多级 Vue Router的使用方法( 官方文档 ) 子父组件的写法 样式:elementUI 效果图 实现 --- 目录结构 --- Vue Router的使用方法 首先安装 npm insta

  • vue地址栏直接输入路由无效问题的解决

    vue 项目只要不是静态页面,一般都会和官方的路由管理器 vue-router 一起使用. 最近项目有一个需求,是在地址栏输入路由,跳转到对应路由组件,在开发环境中这样做是可以跳转的,但是项目打包后,通过地址栏跳转会报错. 因为 vue 在页面上显示哪个组件是根据 vue-router 进行控制的,在地址栏上直接输入路由名称,并不能触发 vue-router 的规则,所以只能通过监听地址的改变,利用回调函数在组件内部进行动态修改路由. 方式一:history 模式 vue-router 默认是

  • 简述vue路由打开一个新的窗口的方法

    简单说一下vue路由如何打开一个新的窗口 1.router-link标签 在vue的官方文档中 看到这大家应该会想,既然router-link不支持target="_blank"属性,那我们该怎么用router-link打开一个新的窗口呢?别急,继续往下看~ 文档中还有一处描述 router-link添加tag="li"属性后,居然可以变成li标签渲染出来,真特么神奇哈,那可不可以写成tag="a",从而去替代a标签呢?我们尝试着写一哈 <

  • vue路由--网站导航功能详解

    1.首先需要按照Vue router支持 npm install vue-router 然后需要在项目中引入: import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 2.定义router的js文件 import Vue from 'vue' import Router from 'vue-router' import User from '../pages/user' import Home fro

  • vue后台管理之动态加载路由的方法

    vue后台管理之动态加载路由的方法

    在这里我们将会实现一个vue动态路由的案列,当用户登陆成功后,根据用户的角色,拿到他对应的菜单信息,并将它动态的载入到我们的路由中. 我们的通用的后台管理系统中,我们会根据权限的粗细不同,会对每个角色每个权限每个资源进行控制.同样的我们也需要实现一个这样的功能. 这篇文章我将主要讲vue端的实现,关于后台接口我就不会涉及,当我接触的时候我们的后台接口是springcloud实现. 一.思路 在vue-router对象中首先初始化公共路由,比如(404,login)等,然后在用户登陆成功,根据用户

  • 详解解决Vue相同路由参数不同不会刷新的问题

    通常情况下我们喜欢设置keepAlive 包裹 router-view <div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div> 同时在created 中触发请求,在路由参数不同的情况下并不会执行对应的操作. 解决方法: 1.给 router-view 设置 key 属性为路由的完整路径 <keep-alive&g

  • 基于vue-router 多级路由redirect 重定向的问题

    在做多级路由的时候遇到很多问题,虽然不难,但是如果没有经验,往往要花一整天时间才能解决(可能我笨),况且网上资料也很少. 项目需要是这样的: 登录页面跳到后台页面重定向,登录页是一级路由 对应页面 登录后: 同时重定向二级和三级页面, 这样登录就会重定向了,此时url 但又有一个问题:当再次点击底部"堂食"的时候, url变成这样,并且三级页面没有出来 解决办法是:在这个"堂食"按键 添加一个方法 记住,也只有这样传参才有效 如果在<router-link&g

  • vue3.0 CLI - 3.2 路由的初级使用教程

    我的 github 地址 -vue3.0Study- 阶段学习成果都会建立分支. ========================== 动态路由 在路由某部分里加入[ : ],就成为动态路由如:/user/:id/,那么路由导航,并不是  /user/id/ 而是 /user/666/. 显然这个 id 能被获取,在组件中使用.通过 this.$route.params 获取. this 是当前组件,$route 是路由对象,params 是一个对象字面量 { id:666 }. $route

  • vue3.0 CLI - 2.6 - 组件的复用入门教程

    我的 github 地址 - vue3.0Study- 阶段学习成果都会建立分支. ========================== 定义一个基础组件 这个基础组件,是导航条中 可以复用 的基础组件 单个导航. 基础组件[导航组件]基础的功能是能够显示文字,单击的交互方式.明确任务目标之后,进行开发. 在 component 目录下新建 Base 目录,Base 下新建文件 TopNav.vue.加入如下代码: <template> <div class="topnav&q

  • vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造

    我的 github 地址 - vue3.0Study- 阶段学习成果都会建立分支. helloworld.vue 都挪到 about 路由当中. <template><div class="about"><HelloWorld msg="vue 官方相关资料的链接"/></div></template> <script> import HelloWorld from '@/components/

  • vue3.0 CLI - 2.1 - component 组件入门教程

    我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支. 进入 src 文件夹,这是实际都工程文件夹,其他文件夹以及文件以后在了解. 3个文件夹  assets - 各类静态资源文件夹 - 比如 图片, css 文件等.  components - 组件文件夹, 组件是 vue 等 MVC 框架等核心概念,自行了解含义. view - 视图文件夹. 5个文件  app.vue.main.js - 主视图.配合 main.js 成为 vue 程序的主入口.router.

  • vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单

    我的 github 地址 - vue3.0Study- 阶段学习成果都会建立分支. 新组件 - 新路由 Forms.vue ( 下面仅介绍如何创立, 不进行介绍 ) : <template><div class="form"> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>

  • vue3.0 CLI - 1 - npm 安装与初始化的入门教程

    node 开发环境请先自行准备 npm install -g @vue/cli 安装完成之后命令行则存在 vue 命令 vue -V 查看本地 vue 版本 vue -h 输出帮助 vue create <project-name> 进入工程文件夹,创建项目. 如:cd studyVue ( 进入工程文件夹 ) vue create config ( 创建 config 项目 ) 选择 default 配置项,下面没什么可介绍的,自行尝试. 下面介绍选择 manually select fea

  • vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    我的 github 地址 - vue3.0Study- 阶段学习成果都会建立分支. 首先美化一下界面 - 相关的界面代码不粘贴,可从我的 github 分支中看到.下面最终的实现效果图: 改造下 data 中的 navs 属性 ( navs 数组每个元素都是 包含 active 和 data 属性的对象 ): created: function () { fetch('https://www.apiopen.top/journalismApi') .then(v => v.json()) .th

  • vue3.0 CLI - 2.5 - 了解组件的三维

    我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支. 问答 1.vue 组件有什么? 为什么要加上 vue,因为不同的 MVC 框架,东西不一样,不过基本的功能都有. 组件有 data.computed.watch.methods 以及生命周期钩子等.对于入门者来说,先搞清楚这些是什么东西. data 属性经过前面几篇文章的学习,对其已有初步的了解. computed 是计算属性,前面也有了解. methods 组件方法,其实是专门定义函数的一个对象,这些函数最终

  • vue3.0路由自动导入的方法实例

    vue3.0路由自动导入的方法实例

    一.前提 我们使用的是require.context方法导入,在vite创建的项目内使用会报错"require not found",所以必须用webpack创建项目.或者有大能可以说说vite怎么解决这个问题. 二.规则 我们使用的规则是,搜索src/views/路径下的所有目录和子目录,搜索文件名叫做"index.vue"的文件,使用上级目录的名字作为组件名,进行注册.结构如下: 和公共组件注册一样,我们只注册index.vue组件,其他名称的组件不进行注册.

  • vue3.0 上手体验

    vue3.0 beta 版本已经发布有一阵子了,是时候上手体验一波了- 注意,本文所有演示都是基于 vue3.0 beta 版本,不保证后续正式版 api 不改动.等官方文档出来后,以官网为准. 环境搭建 直接使用脚手架,如果本地没有安装的可以执行脚手架安装命令: npm install -g @vue/cli 如果本地安装过的,可以尝试更新一下: npm update -g @vue/cli 测试 vue-cli 版本: vue -V @vue/cli 4.4.1 接下来创建一个vue项目:

随机推荐