锐客网

  1. 首页 > it技术 > >

详解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: (Pressto select,to toggle all, 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 选中,后面一系列的询问按照实际情况进行选择就好

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

将Router安装到Vue中

如果需要让当前Vue实例支持路由功能.需要在Vue实例化时将VueRouter的实例对象注入到Vue实例配置选项router中。(手动安装)
// src/router/index.jsimport Vue from 'vue' // 引入Vueimport VueRouter from 'vue-router' // 引入VueRouter// Vue支持VueRouterVue.use(VueRouter)let router = new VueRouter() // 初始化VueRouternew Vue({router // 将VueRouter的实例对象配置到Vue实例化配置对象的router选项中}).$mount('#app')

main.js中引用
// src/main.jsimport 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, // 路由别名children?: Array, // 嵌套路由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支持VueRouterVue.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主页订单用户/* 导航指定的locationvue router中location对象的常用属性{path:'/', //指定跳转路由的路径hash:'#top' // 指定跳转路由的哈希值 name: 'Home', // 指定跳转的具名路由的name值params: {}, // 指定跳转的路由传递params对象query: {} //指定跳转的路由传递query键值对}*/user// 使用location进行页面跳转时,当前location的params属性无法传递给路由组件的user// 使用name路由导航,可以向任何具名路由传递paramsuser// query支持 name导航和path导航,不推荐传递对象属性时使用query传参user

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

append: bool 当该属性为真时,当前路由如果是相对路径(路径没有/开头)路由的跳转将会基于浏览器url进行下一级的跳转,默认值为false
// 如果当前浏览器url /order// 点击 Gec 会跳转到 /order/gecGec// 点击 Gec1 因为Gec1的to不是相对路径 append就会无效,路由会跳转到 /gecGec1// 点击 Gec2 没有append 会跳转到 /gecGec2

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

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

event: string | Array 指定当前router-link元素,声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。默认值是click
// 双击 和 点击都能触发当前元素的路由跳转主页


2. router-view 根据当前VueRouter的配置,当路由路由路径发生改变时渲染对应的路由视图组件
router-view 组件是一个 functional 组件，渲染路径匹配到的视图组件。 渲染的组件还可以内嵌自己的 router-view，根据嵌套路径，渲染嵌套组件。 其他属性 (非 router-view 使用的属性除name) 都直接传给渲染的组件，很多时候，每个路由的数据都是包含在路由参数中。
因为它也是个组件，所以可以配合 transition 和 keep-alive 使用。如果两个结合一起用，要确保在内层使用 keep-alive：

以上就是详解Vue-Router的安装与使用的详细内容，更多关于Vue-Router的安装与使用的资料请关注脚本之家其它相关文章！

    推荐阅读


    上一篇：python异常的捕捉和补救实例详解

    下一篇：vue|vue 单元测试的推荐插件和使用示例