Vue开发之vue-router的基本使用

更新日期: 2020-01-31阅读: 2.2k标签: 路由

一、安装

1、如果你用vue-cli脚手架来搭建项目,配置过程会选择是否用到路由,如果选择Yes,后面下载依赖会自动下载vue-router。

Install vue-router?  Yes

2、npm

npm install vue-router


二、将组件 (components) 映射到路由 (routes)并渲染

步骤一

使用vue-cli搭建项目,项目结构中会有一个src文件目录,src文件目录下会有一个router文件夹,此处就是用来编写路由组件的地方。

在src/router/index.js,这个文件就是路由的核心文件。在这个文件里,我们需要做的是,将组件 (components) 映射到路由 (routes)。

// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)
import Vue from 'vue'  // 导入vue
import VueRouter from 'vue-router' // 导入vue-router
Vue.use(VueRouter)
// 1. 定义(路由)组件
import Home from '@/components/Home'
// 2. 创建 router 实例,然后传 `routes` 配置
export default new Router({
 // 3. 定义路由,每个路由应该映射一个组件,
 // “component”可以是通过 Vue.extend() 创建的组件构造器,
 // 或者,只是一个组件配置对象。
  routes: [
    {
      path: '/', 
      name: 'Home', 
      component: Home
    }
  ]
})

步骤二

在src文件目录下找到main.js文件,在此目录创建和挂载根实例,通过 router 配置参数注入路由,从而让整个应用都有路由功能。代码如下:

// 1. 引入router
import router from './router'
// 2. 创建和挂载根实例
new Vue({
  router
}).$mount('#app')

步骤三

在src文件目录下找到app.vue文件,在该文件夹下引用router-view组件,用于渲染路由匹配到的组件。ps:一般情况下会在app.vue文件下引用router-view组件,当然也可以在其他地方使用,根据实际情况来定。用法如下:

<template>
  <div>
    <router-view />
  </div>
</template>


三、声明式导航

使用 <router-link> 创建 a 标签来定义导航链接。

<div id="app">
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <!-- `replace` 不会向 history 添加新记录,而是替换掉当前的 history 记录-->
    <router-link to="/bar" replace>Go to Bar</router-link>
</div>


四、编程式导航

除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。

router.push(location, onComplete?, onAbort?)

想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

注意:如果提供了 path,params 会被忽略,需要提供路由的 name 或手写完整的带有参数的 path。

1、用法

// 字符串
router.push('home')

// 对象
router.push({path:'home'})

// 命名的路由
router.push({name:'user',params:{userId:'123'}})

// 带查询参数,变成 /register?plan=private
router.push({path:'register',query:{plan:'private'}})

2、获取参数的两种常用方法:params和query

const userId='123'
// 传值
router.push({name:'user',params:{userId}})
// 取值
this.$route.params.userId
// 传值
router.push({path:`/user/${userId}`})
// 取值
this.$route.query.userId

router.replace(location, onComplete?, onAbort?)

跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。

this.$router.push({path:'/home',replace:true})
//如果是声明式就是像下面这样写:
<router-link :to="..." replace></router-link>
// 编程式:
router.replace(...)

router.go(n)

这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)。

// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)
// 后退一步记录,等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用,那就默默地失败呗
router.go(-100)
router.go(100)


五、html5 History 模式

vue-router 默认 hash 模式,如果要使用路由的history模式,使用方式如下:

const router = new Vue Router({
    mode: 'history',
    routes: [...]
})

注:history这种模式还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404。
如果你的应用加载的是空白页,可以考虑一下是不是使用了history模式。


六、路由懒加载

简单使用

// 1. 定义一个能够被 webpack 自动代码分割的异步组件
const Foo = () => import('./Foo.vue')

// 2. 路由配置
const router = new VueRouter({
    routes: [
        { path: '/foo', component: Foo }
    ]
})

把组件按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

const Foo = () => import(/* webpackChunkName: "group-foo" */  './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */  './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */  './Baz.vue')

Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

链接: https://fly63.com/article/detial/8806

vue路由history模式_如何去除vue项目中的#

在使用vue-cli搭建的环境中,浏览器上URL地址中是存在#的,这是由于vue-router 默认 hash 模式,不难发现#的出现真的很丑陋。官网给出了如何使用history模式mode: history

vue路由传参主要的3种方式

vue中路由传参主要的3种方式:query方式(push时使用path来匹配)、params模式(push时使用name来匹配)、location预声明参数模式(push使用path来匹配,但是它跟params模式不同)

vue动态加载路由_实现vue动态加载路由器设置

我们的通用的后台管理系统中,我们会根据权限的粗细不同,会对每个角色每个权限每个资源进行控制。同样的我们也需要实现一个这样的功能。 这篇文章我将主要讲vue端的实现,关于后台接口我就不会涉及,当我接触的时候我们的后台接口是springcloud实现。

两种前端路由的实现方式

前后端分离开发模式,后端会把路由控制丢在前端,这几天再开发单页面小的项目,手动撸了个路由。前端路由实现有两种方法。HTML5 History API包括2个方法:history.pushState()和history.replaceState(),和1个事件:window.onpopstate。hash + location.onhashchange

vue动态路由_vue-router通过接口请求动态生成路由的实现

在后台管理系统中,一般都会采用权限管理。路由菜单数据都会保存到数据库中,在vue-router 2.2版本新增了一个router.addRoutes(routes)方法,即可用它来实现动态路由了

HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

vue router 路由鉴权(非动态路由)

原本想用动态路由的思路去做,按权限加载对应路由表,但是由于权限可以交叉(比如一个人可以同时是主题管理员和数据服务管理员),导致权限路由表还是得去做判断组合。于是放弃了这个思路,索性就在beforeEach里直接判断了。

vue中路由按需加载的几种方式

使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,webpack在打包的时候会把整个路由打包成一个js文件,如果页面一多,会导致这个文件非常大,加载缓慢

vue-router 中参数传递(params,query)

query和params的区别,query相当于get请求,在页面跳转的时候,可以在地址栏看到请求参数,然而params则相当于post请求,参数不会在地址栏中显示。

Node.js的路由

当服务端接收到HTTP请求时,可以通过onRequest() 获取到url, pathname,query,及paramParams参数;为了解析这些数据需要使用url和querystring模块

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!