详解Vue-Router的安装与使用

 更新时间:2021年06月21日 08:37:52   作者:性感的小肥猫  
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。本文介绍下Vue Router的安装与使用

安装

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的安装与使用的资料请关注脚本之家其它相关文章!

相关文章

  • Vue 3.0中jsx语法的使用

    Vue 3.0中jsx语法的使用

    这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • 利用vuex-persistedstate将vuex本地存储实现

    利用vuex-persistedstate将vuex本地存储实现

    这篇文章主要介绍了利用vuex-persistedstate将vuex本地存储的实现,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 解析Vue.js中的组件

    解析Vue.js中的组件

    组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。这篇文章主要介绍了vue.js 中的组件,需要的朋友参考下
    2018-02-02
  • vue 基于element-ui 分页组件封装的实例代码

    vue 基于element-ui 分页组件封装的实例代码

    这篇文章主要介绍了vue 基于element-ui 分页组件封装的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • vue 项目页面卡死原因排查分析

    vue 项目页面卡死原因排查分析

    这篇文章主要介绍了vue 项目页面卡死原因排查分析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue3.0路由跳转携带参数的示例详解

    Vue3.0路由跳转携带参数的示例详解

    这篇文章主要介绍了Vue3.0路由跳转携带参数的示例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue上传文件formData上传的解决全流程

    vue上传文件formData上传的解决全流程

    这篇文章主要介绍了vue上传文件formData上传的解决全流程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Vue-axios-post数据后端接不到问题解决

    Vue-axios-post数据后端接不到问题解决

    这篇文章主要介绍了Vue-axios-post数据后端接不到问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • vue 解决异步数据更新问题

    vue 解决异步数据更新问题

    今天小编就为大家分享一篇vue 解决异步数据更新问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue实现简单实时汇率计算功能

    vue实现简单实时汇率计算功能

    这篇文章主要为大家详细介绍了vue实现简单实时汇率计算功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论