【转】使用Vue-Router 2实现路由功能

seanlook 发布于2019-08-21 15:36 / 2038人阅读

摘要：请输入代码注意只适用于版本，下面我们是基于讲的如何使用实现路由功能。一使用路由在中，需要明确安装路由功能定义组件，这里使用从其他文件进来定义路由创建实例，然后传配置创建和挂载根实例。路由记录就是配置数组中的对象副本还有在数组。

请输入代码注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。
推荐使用npm安装。

npm install vue-router

一、使用路由
在main.js中，需要明确安装路由功能：

import Vue from "vue"
import VueRouter from "vue-router"
import App from "./App.vue"
Vue.use(VueRouter)

1.定义组件，这里使用从其他文件import进来

import index from "./components/index.vue"
import hello from "./components/hello.vue"

2.定义路由

const routes = [
    { path: "/index", component: index },
    { path: "/hello", component: hello },
]

3.创建 router 实例，然后传 routes 配置

const router = new VueRouter({
  routes
})

4.创建和挂载根实例。通过 router 配置参数注入路由，从而让整个应用都有路由功能

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

经过上面的配置之后呢，路由匹配到的组件将会渲染到App.vue里的
那么这个App.vue里应该这样写：


index.html里呢要这样写：

这样就会把渲染出来的页面挂载到这个id为app的div里了。
二、重定向 redirect

const routes = [
    { path: "/", redirect: "/index"},     // 这样进/ 就会跳转到/index
    { path: "/index", component: index }
]

三、嵌套路由

const routes = [
    { path: "/index", component: index,
        children: [
            { path: "info", component: info}
        ]
     }
]

通过/index/info就可以访问到info组件了
四、懒加载

const routes = [
    { path: "/index", component: resolve => require(["./index.vue"], resolve) },
    { path: "/hello", component: resolve => require(["./hello.vue"], resolve) },
]

通过懒加载就不会一次性把所有组件都加载进来，而是当你访问到那个组件的时候才会加载那一个。对于组件比较多的应用会提高首次加载速度。
五、
在vue-router 1中，使用的是
在vue-router 2中，使用了替换1版本中的a标签

Home

Home

Home

Home

Home

User

Register

六、路由信息对象
1.$route.path
字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。

2.$route.params
一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。

3.$route.query
一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

4.$route.hash
当前路由的 hash 值 (不带 #) ，如果没有 hash 值，则为空字符串。

5.$route.fullPath
完成解析后的 URL，包含查询参数和 hash 的完整路径。

6.$route.matched
一个数组，包含当前路由的所有嵌套路径片段的路由记录。路由记录就是 routes 配置数组中的对象副本（还有在 children 数组）。
综合上述，一个包含重定向、嵌套路由、懒加载的main.js如下：

import Vue from "vue"
import VueRouter from "vue-router"
import App from "./App"
Vue.use(VueRouter)
const router = new VueRouter({
  routes:[
    { path: "/", redirect: "/index" },
    { path: "/index", component: resolve => require(["./components/index.vue"], resolve),
        children:[
            { path: "info", component: resolve => require(["./components/info.vue"], resolve) }
       ]
    },
    { path: "/hello", component: resolve => require(["./components/hello.vue"], resolve) },
  ]
})
const app = new Vue({
  router,
  render: h => h(App)
}).$mount("#app")

云服务器 GPU云服务器路由功能智能路由功能服务器开启路由功能无线路由器功能介绍

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88251.html

前端路由跳转基本原理

摘要：目前前端三杰都推介单页面应用开发模式，在路由切换时替换中最小修改的部分，来减少原先因为多页应用的页面跳转带来的巨量性能损耗。 showImg(https://segmentfault.com/img/bVbn1ZN?w=3069&h=2048); 目前前端三杰 Angular、React、Vue 都推介单页面应用 SPA 开发模式，在路由切换时替换 DOM Tree 中最小修改的部分 ...

SillyMonkey 2019-08-23 15:05 评论0 收藏0
vue-router 一些容易被忽略的知识点

摘要：调用全局的守卫。在被激活的组件里调用。用创建好的实例调用守卫中传给的回调函数。本文适用于对 Vue.js 和 vue-router 有一定程度了解的开发者除特殊说明，vue-router 版本为 3.0.2 正文路由 class 匹配路由匹配后会给该标签添加 class 属性值 .router-link-active，该功能在嵌套路由中十分方便 class 的实际属性值可以通...

chunquedong 2019-08-23 14:58 评论0 收藏0
一篇搞定vue-Router导航守卫

摘要：如果我们不掉用守卫中的，迭代器的肯定并不会执行，守卫的迭代就停止了，守卫堵塞并不会执行完毕，也就不会由后面的更细路由操作了。 vue-router导航守卫在本期文章中，我将为大家梳理弄明白以下几个事情， 1:导航守卫的执行顺序是怎么样的？ 2:导航守卫中的next的用处？ 3:为什么afterEach守卫没有next？ 4:beforeEach是否可以叠加？ 5:路由跳转经历了哪几部...

不知名网友 2019-08-23 12:12 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

tommego 2019-08-23 12:55 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

jhhfft 2019-08-02 11:56 评论0 收藏0