Vue2.0上手教程(二)— Vue 路由的使用(Vue-Router2)教程

  • A+
所属分类:前端开发

用 Vue.js + vue-router 创建单页应用,是非常简单的,使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们。Vue2.0 有一个配合度很高的路由插件,就是 Vue-Router 2,但是 Vue-Router@2.x 只适用于 Vue2.x 版本,其他的 0.7.x 版本文档可以去这里查看

一、安装 Vue-Router 路由

如果你是使用 Vue脚手架(Vue-cli)搭建的项目,那么你在使用 vue init webpack demo 命令创建项目的同时,可以直接选择安装 vue-router,或者你也可以单独使用命令 npm install vue-router 的方式来安装。本教程使用的 Vue-Router 是在创建项目的同时已经选择安装好了,如果不会使用 Vue 脚手架来搭建项目,可以参考上一篇文章来学习。

二、配置 Vue-Router 路由

1、在 main.js中安装路由插件

  1. import Vue from 'vue'
  2. import App from './App'
  3. import Router from 'vue-router'
  4. Vue.use(Router)

2、定义路由组件,如果路由组件比较多的话,也可以路由组件单独写成一个router.js文件,然后在引入到main.js中

  1. import Home from '../components/home.vue'
  2. import Page1 from '../components/page1.vue'
  3. import Page2 from '../components/page2.vue'
  4. import Page3 from '../components/page3.vue'

3、定义路由

  1. const routes = [
  2.   {path: '/',redirect: '/home'},             // 重定向路由设置,这样进/ 就会跳转到/home
  3.   {path: '/home',component: Home,},
  4.   {path: '/page1',component: Page1,},
  5.   {path: '/page2',component: Page2},
  6.   {path: '/page3',component: Page3}
  7. ]

4、创建router实例

  1. const router = new Router({
  2.   routes
  3. })

5、创建和挂载根实例

  1. const app = new Vue({
  2.   router,
  3.   render: h => h(App)
  4. }).$mount('#app')

经过上面的配置之后,路由匹配到的组件将会渲染到 App.vue 里的 <router-view></router-view> 中
默认的 App.vue 里应该是:

  1. <template>
  2.   <div id="app">
  3.     <router-view></router-view>
  4.   </div>
  5. </template>

默认的 index.html 里应该是:

  1. <body>
  2.   <div id="app"></div>
  3. </body>

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

三、路由 Vue-Router 嵌套

  1. const routes = [ { path: '/home', component: home,
  2.    children: [ { path: 'page', component: page} ]
  3. }]

这样通过 /home/page 就可以访问到 page 的页面了。

四、路由 Vue-Router 懒加载

  1. const routes = [
  2.     { path: '/home', component: resolve => require(['./home.vue'], resolve) },
  3.     { path: '/page', component: resolve => require(['./page.vue'], resolve) },
  4. ]

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

五、路由导航 <router-link>

1、声明式导航
当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 <router-link :to="..."> 等同于调用 router.push(...)

  1. <!-- 字符串 -->
  2. <router-link to="home">Home</router-link>
  3. <!-- 渲染结果 -->
  4. <a href="home">Home</a>
  5. <!-- 使用 v-bind 的 JS 表达式 -->
  6. <router-link v-bind:to="'home'">Home</router-link>
  7. <!-- 不写 v-bind 也可以,就像绑定别的属性一样 -->
  8. <router-link :to="'home'">Home</router-link>
  9. <!-- 同上 -->
  10. <router-link :to="{ path: 'home' }">Home</router-link>
  11. <!-- 命名的路由 -->
  12. <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
  13. <!-- 带查询参数,下面的结果为 /register?plan=private -->
  14. <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

2、编程式导航
除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。router.push(location, onComplete?, onAbort?)

  1. <!-- 字符串 -->
  2. router.push('home')
  3. <!-- 对象 -->
  4. router.push({ path: 'home' })
  5. <!-- 命名的路由 -->
  6. router.push({ name: 'user', params: { userId: 123 }})
  7. <!-- 带查询参数,下面的结果为 /register?plan=private -->
  8. router.push({ path: 'register', query: { plan: 'private' }})

注意:如果提供了 path,params 会被忽略,上述中的 query 并不属于这种情况。
更详细的 vue-router 功能请参考文档:https://router.vuejs.org/zh-cn/

博主只是一名前端的小白,只是把自己用到的知识分享一下,要是有什么不对的地方,欢迎大家提出~~

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: