Rumah > Artikel > hujung hadapan web > 在Vue-Router2.X中实现多种路由实现

在Vue-Router2.X中实现多种路由实现

亚连asal: 2018-06-06 16:03:131556semak imbas

下面我就为大家分享一篇Vue-Router2.X多种路由实现方式总结，具有很好的参考价值，希望对大家有所帮助。

注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。

推荐使用npm安装。

npm install vue-router

一、使用路由

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

import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
import App from &#39;./App.vue&#39;
Vue.use(VueRouter)

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

import index from &#39;./components/index.vue&#39;
import hello from &#39;./components/hello.vue&#39;

2.定义路由

const routes = [
 { path: &#39;/index&#39;, component: index },
 { path: &#39;/hello&#39;, component: hello },
]

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

const router = new VueRouter({
 routes
})

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

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

经过上面的配置之后呢，路由匹配到的组件将会渲染到App.vue里的975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e

那么这个App.vue里应该这样写：

<template>
 <p id="app">
  <router-view></router-view>
 </p>
</template>
index.html里呢要这样写：
<body>
 <p id="app"></p>
</body>

这样就会把渲染出来的页面挂载到这个id为app的p里了。

二、重定向 redirect

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

三、嵌套路由

const routes = [
 { path: &#39;/index&#39;, component: index,
  children: [
   { path: &#39;info&#39;, component: info}
  ]
  }
]

通过/index/info就可以访问到info组件了

四、懒加载

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

通过懒加载就不会一次性把所有组件都加载进来，而是当你访问到那个组件的时候才会加载那一个。对于组件比较多的应用会提高首次加载速度。

五、b988a8fd72e5e0e42afffd18f951b277

在vue-router 2中，使用了b988a8fd72e5e0e42afffd18f951b277d625018d6d57dc2163f3a71531b24864替换1版本中的a标签

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home" rel="external nofollow" >Home</a>
<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="&#39;home&#39;">Home</router-link>
<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="&#39;home&#39;">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: &#39;home&#39; }">Home</router-link>
<!-- 命名的路由 -->
<router-link :to="{ name: &#39;user&#39;, params: { userId: 123 }}">User</router-link>
<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: &#39;register&#39;, query: { plan: &#39;private&#39; }}">Register</router-link>

六、路由信息对象

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(&#39;#app&#39;)

上面是我整理给大家的，希望今后会对大家有帮助。

集成vue到jquery/bootstrap项目方法？

在vue.js中实现分页中单击页码更换页面内容

在vue2.0组件中如何实现传值、通信

Atas ialah kandungan terperinci 在Vue-Router2.X中实现多种路由实现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：react项目开发Artikel seterusnya：详细解读react受控组件与非受控组件

Artikel berkaitan

Lihat lagi