详解Vue-Router的安装与使用

目录
  • 安装
  • 路由的基础配置
    • 将Router安装到Vue中
    • Router的相关配置
    • Router.routes 的相关配置
  • 实现一个简单的路由
    • 1.配置路由
    • 2. 在组件中实现路由
      • 1. router-link 用于实现路由的跳转组件:该组件支持的属性
      • 2. router-view 根据当前VueRouter的配置,当路由路由路径发生改变时渲染对应的路由视图组件

安装

1.在已有Vue项目中手动安装vue-router

npm install --save vue-router

2.使用vue-cli创建自带vue-router的新项目
空格选择/取消 a全选 i反选

vue create project_name
#Vue 会询问你使用哪种配置
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features 

#请选择 Manually select features,Vue会询问你当前项目需要哪些配置

Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)

>(*) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
#请将Router 选中,后面一系列的询问按照实际情况进行选择就好

路由的基础配置

  1. 如果选择了第一种安装方式(手动安装),需要手动在src文件夹下新建一个名为router的文件夹并新建index.js文件
  2. 如果选择了第二种安装方式(自定义安装),不用自己进行配置,新建项目完毕后就可以直接使用了

将Router安装到Vue中

如果需要让当前Vue实例支持路由功能.需要在Vue实例化时将VueRouter的实例对象注入到Vue实例配置选项router中。(手动安装)

// src/router/index.js

import Vue from 'vue' // 引入Vue
import VueRouter from 'vue-router' // 引入VueRouter

// Vue支持VueRouter
Vue.use(VueRouter)

let router = new VueRouter() // 初始化VueRouter

new Vue({
  router // 将VueRouter的实例对象配置到Vue实例化配置对象的router选项中
}).$mount('#app')

main.js中引用

// src/main.js

import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Router的相关配置

属性名 类型 描述
routes Array 当前Router中所有路由配置
modeString 可选值: "hash" / "history" 默认值'hash' 该模式下路由使用hash保证路由与视图一致history 模式使用h5新增 window.history 实现路由与视图一致
linkActiveClass String 默认值: "router-link-active" 全局配置  默认的激活的 class
linkExactActiveClass String 默认值: "router-link-exact-active" 全局配置  默认的精确激活的 class。

注意 严格匹配link标签to路由路径必须全等于当前浏览器的url,非严格匹配当前浏览器url可以为当前link的子路由。

例子

to="/home"   url="/home/user" 非严格匹配
to="/home"   url="/home/user/10086" 非严格匹配
to="/home"   url="/home"  严格匹配
to="/"       url="/order" / 是所有路由的根路由,所以他们非严格匹配

Router.routes 的相关配置

{
  path: string,
  component?: Component, // 当前路由匹配时显示的路由组件
  name?: string, // 命名路由
  redirect?: string | Location | Function, // 路由重定向
  props?: boolean | Object | Function,  //
  alias?: string | Array<string>, // 路由别名
  children?: Array<RouteConfig>, // 嵌套路由
  beforeEnter?: (to: Route, from: Route, next: Function) => void, //路由守卫
  caseSensitive?: boolean, // 匹配规则是否大小写敏感?(默认值:false)
}

实现一个简单的路由

1.配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './views/Home'
import Order from './views/Order'
import User from './views/User'

// Vue支持VueRouter
Vue.use(VueRouter)

let router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/order',
      component: Order
    },
    {
      path: '/user',
      component: User
    }
  ]
})

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

2. 在组件中实现路由

VueRouter给Vue提供了两个组件

  • router-link
  • router-view

1. router-link 用于实现路由的跳转组件:该组件支持的属性

to: string | location 当用户点击该组件时就会跳转至to指定的路由

// 导航指定的url
<router-link to="/home">主页</router-link>
<router-link to="/order">订单</router-link>
<router-link to="/user">用户</router-link>
/* 导航指定的location
vue router中location对象的常用属性{
    path:'/', //指定跳转路由的路径
    hash:'#top' // 指定跳转路由的哈希值
    name: 'Home', // 指定跳转的具名路由的name值
    params: {}, // 指定跳转的路由传递params对象
    query: {} //  指定跳转的路由传递query键值对
}
*/
<router-link :to="{path:'/user'}">user</router-link>
// 使用location进行页面跳转时,当前location的params属性无法传递给路由组件的
<router-link :to="{path:'/user',hash:'#top',params:{id:1,name:'小明'}}">user</router-link>
// 使用name路由导航,可以向任何具名路由传递params
<router-link :to="{name:'User',hash:'#top',params:{id:1,name:'小明'}}">user</router-link>
// query支持 name导航和path导航,不推荐传递对象属性时使用query传参
<router-link :to="{name:'User',hash:'#top',query:{id:1,name:'小明'}}">user</router-link>

replace: bool 当该属性为真时,路由的跳转将以替换的形式跳转到下一个页面(下一个路由会把当前浏览器历史记录栈中的url替换成将要跳转的路由),默认值为false

// 使用替换的形式跳转路由
<router-link class="tab-item" replace to="/user">用户</router-link>

append: bool 当该属性为真时,当前路由如果是相对路径(路径没有/开头)路由的跳转将会基于浏览器url进行下一级的跳转,默认值为false

// 如果当前浏览器url /order
// 点击 Gec 会跳转到 /order/gec
<router-link  to="gec" append>Gec</router-link>
// 点击 Gec1 因为Gec1的to不是相对路径 append就会无效,路由会跳转到 /gec
<router-link  to="/gec" append>Gec1</router-link>
// 点击 Gec2 没有append 会跳转到 /gec
<router-link  to="gec">Gec2</router-link>

tag: string 指定当该router-link标签最终以什么DOM元素渲染到页面上,默认值是a

// 将router-link以span元素渲染到页面上
<router-link tag="span" class="tab-item" to="/">主页</router-link>

active-class: string 指定当前router-link元素,如果与浏览器url非严格匹配时class名。默认值是VueRouter实例化时 linkActiveClass 指定值

// 当前router-link非严格匹配时class名为aaaa
<router-link  active-class="aaaa" to="/order">订单</router-link>

event: string | Array<string> 指定当前router-link元素,声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。默认值是click

// 双击 和 点击都能触发当前元素的路由跳转
<router-link :event="['dblclick','click']"  to="/">主页</router-link>

2. router-view 根据当前VueRouter的配置,当路由路由路径发生改变时渲染对应的路由视图组件

router-view 组件是一个 functional 组件,渲染路径匹配到的视图组件。 渲染的组件还可以内嵌自己的 router-view,根据嵌套路径,渲染嵌套组件。 其他属性 (非 router-view 使用的属性除name) 都直接传给渲染的组件,很多时候,每个路由的数据都是包含在路由参数中。

因为它也是个组件,所以可以配合 transition 和 keep-alive 使用。如果两个结合一起用,要确保在内层使用 keep-alive:

<transition name="fade">
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

以上就是详解Vue-Router的安装与使用的详细内容,更多关于Vue-Router的安装与使用的资料请关注我们其它相关文章!

(0)

相关推荐

  • VUE安装使用教程详解

    如果是简单实用vue的话,可以直接引用js文件. https://vuejs.org/js/vue.js 但是在构建大型项目的时候推荐使用NPM安装,NPM能够很好的和诸如webpack或Browserify模块打包器配合使用,同时Vue也提供配套工具来开发单文件组件. 1. 安装nodejs 由于npm(nodejs package manager)是nodejs的包管理器,所以要首先安装nodejs,从官网下载相应版本安装即可https://nodejs.org/en/download/.

  • 使用淘宝镜像cnpm安装Vue.js的图文教程

    前言 Vue.js是前端一个比较火的MVVM框架,要使用它,我们必须提前配置,其中有一种安装方式是使用npm,比较适合比较大型的应用.今天就来看看这种方式如何操作,由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue. 步骤 首先我们需要下载npm,因为我已经提前安装了node.js,安装包里面集成了npm,然后我们就可以利用npm命令从获取淘宝镜像的cnpm了. 1.打开命令行窗口,输入 npm install -g cnpm --registry=https://r

  • Vue安装与使用

    目录 1.Vue安装 方式1:CDN引入 方式2:直接下载引入 方式3:npm安装 2.基本使用 前言: Vue(读音/vjuː/,类似于view) 是一套用于构建前后端分离的框架.刚开始是由国内优秀选手尤雨溪开发出来的,目前是全球"最"流行的前端框架.使用vue开发网页很简单,并且技术生态环境完善,社区活跃,是前后端找工作必备技能! 1.Vue安装 vue的安装大体上分成三种方式 方式1:CDN引入 <!--开发环境版本,包含了又帮助的警告命令--> <script

  • 全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作

    官方链接:https://cli.vuejs.org/zh/guide/installation.html 1.安装Vue cli3 关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它. Node 版本要求 Vue CLI 需要 Node.js8.9 或更高版本 (推荐

  • Vue router安装及使用方法解析

    对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成. 安装 基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router --save 当然,官方采用了多种方式进行安装,包括bower,cdn等. 基本用法 在HTML文档中使用,只需要利用v-link这个directive就行了,如: <a v-link="{path: '/view-a'}">Go to view-a</a> ps

  • vue基础入门之vuex安装与使用

    目录 1.什么是vuex 2.安装和引入 3.vuex的使用 4.流程介绍 5.mutation 6.getters过滤 7.Action--异步处理 8.Module 总结 本教程为入门教程,如有错误,请各位前端大佬指出. 1.什么是vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.详细介绍可以参照官网文档vuex.vuejs.org/zh/ 下面简单介绍vuex 2.安装和引入

  • Vue-resource安装过程及使用方法解析

    1.安装 npm install vue-resource --save 2.在main.js中添加 import VueResource from 'vue-resource' //全局注册 Vue.use(VueResource) 3.vue-resource发送请求 a)对象参数,post请求 this.$http.post('http://127.0.0.1:8081/getUserByParam', { userName: this.username, sex:this.sex }).

  • 详解VUE项目中安装和使用vant组件

    Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件. 特性 50+ 个经过有赞线上业务检验的组件 单元测试覆盖率超过 90% 完善的中英文文档和示例 支持babel-plugin-import 支持 TypeScript 支持 SSR 组件中文文档地址:https://youzan.github.io/vant/#/zh-CN/intro 1.创建VUE项目之后进入项目目录运行安装命令: npm i vant -S 2.安装 babel-pl

  • 详解Vue router路由

    目录 1.基本使用 2.几个注意点 3.多级路由(多级路由) 4.路由的query参数 5.命名路由 6.路由的params参数 7.路由的props配置 8.编程式路由导航 9.缓存路由组件 总结 1.基本使用 2.几个注意点 3.多级路由(多级路由) 4.路由的query参数 5.命名路由 例如像三级目录 ,每次写都需要带上一二级目录,比较麻烦,采用命名路由可以用name直接找到 6.路由的params参数 1)在配置路由的时候需要先声明接收params参数,即先占位 2) 7.路由的pro

  • 详解vue中$router和$route的区别

    我们在 vue 项目中一般都会用到路由,而 vue-router 是 vue.js 官方的路由管理器. this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, query 等属性. this.$router:全局的 router 实例.通过 vue 根实例中注入 router 实例,然后再注入到每个子组件,从而让整个应用都有路由功能.其中包含了很多属性和对象(比如 history 对象),任何页面也都可以调用其 push(

  • 详解Vue开发网站seo优化方法

    因为用了vue等js的数据绑定机制来展示页面数据,爬虫获取到的html是模型页面而不是最终数据的渲染页面,搜索引擎是不回去执行请求到的js.vue的项目都是ajax请求数据,引擎爬虫进入页面获取不到文字内容,现在大多数解决方案是不采用ajax渲染数据,而是采用server端渲染,也就是所谓的SSR. 目前基于vue的方案是Nuxt.js,同类型的也有React版的Nuxt.js所以服务端渲染就是尽量在服务器发送到浏览器前,页面上是有数据可让爬虫进行爬取 方法一.利用prerender-spa-p

  • 详解vue route介绍、基本使用、嵌套路由

    目录 前言 一.介绍.安装 1.定义 2.安装 二.基本使用(代码后赋) 三.嵌套路由 1.布局逻辑 2.效果展示 3.代码 四.注意 前言 想要学习完整内容请关注主页的专栏————>Vue学习 本次的代码段是结合体,被我分开发文,我以在看代码段时,已经截图展示,所看部分 一.介绍.安装 1.定义 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用. 路由:route 一组key-v的对应关系(路径的改变对应的组件进行切换) 路由器:route

  • 详解Vue 全局引入bass.scss 处理方案

    为解决在Vue组件中全局引入 scss 变量及 mixins ,装载了一个名为 "sass-resources-loader" 解析器. 安装 $ > cnpm i -D sass-resources-loader 配置 配置的话是在 vue 的 loader 解析器中配置,即在 vue-cli 脚手架方式构建出来的文件中是以 build/utils.js,在该文件中定义了 cssLoaders() 方法,该方法定义了诸如 css.less的解析方式,具体如下. // build

  • 详解vue项目打包后通过百度的BAE发布到网上的流程

    经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. 继续编辑终于将自己写的JSON文件模拟的数据也传上去了. 具体的步骤: 1,首先讲写好的vue项目打包(具体的打包过程我就不在说了,直接npm run build,就会在VUE项目文件中重新创建一个dist文件,这个就是打包好的项目) 2,在百度的应用引擎BAE部署一个项目,一天才2毛钱很便宜.自己

  • 详解Vue项目引入CreateJS的方法(亲测可用)

    1 前 言 1.1 CreateJS介绍 CreateJS是基于HTML5开发的一套模块化的库和工具. 基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画和交互应用. A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5. 包含4类工具库 EaselJS

  • 详解vue 路由跳转四种方式 (带参数)

    1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

  • 详解vue beforeEach 死循环问题解决方法

    什么是beforeEach? beforeEach 是一个vue-router的路由导航钩子,一般我用它做路由守卫. 什么是路由守卫? 路由跳转前做一些验证,比如登录验证,是网站中的普遍需求.对此,vue-route 提供的beforeRouteUpdate可以方便地实现导航守卫(navigation-guards).导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧.** 文档地址:https://router.vuejs.org/

随机推荐