第4章 Vue全家桶(vue-router+vuex) - 4.1 vue-router的介绍和下载

介绍

Vue Router 是 Vue.js 官⽅的路由管理器。它和 Vue.js 的核⼼深度集 成，让构建单⻚⾯应⽤变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有⾃动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中⾃动降级 ⾃定义的滚动条⾏为

起步

⽤ Vue.js + Vue Router 创建单⻚应⽤，是⾮常简单的。使⽤ Vue.js ，我们已经可以通过组合组件来组成应⽤程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪⾥渲染它们

安装

npm i vue-router -S

在main.js中

import Vue from 'vue'
import VueRouter from 'vue-router'
  
Vue.use(VueRouter)

推荐使⽤:vue add router 添加插件(记得提前提交)

基本使⽤

router.js

import Vue from 'vue'
//1.导⼊
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
//2.模块化机制 使⽤Router
Vue.use(Router)
//3.创建路由器对象
const router = new Router({
 routes:[{
 path: '/home',
 component: Home
 },
 {
 path: '/about',
 component: About
 }
 ]
})
export default router;

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
 // 4.挂载根实例
 router,
 render: h => h(App)
}).$mount('#app')

做好以上配置之后

App.vue

<template>
 <div id="app">
 <div id="nav">
 <!-- 使⽤router-link组件来导航 -->
 <!-- 通过传⼊to属性指定连接 -->
 <!-- router-link默认会被渲染成⼀个a标签 -->
 <router-link to="/">Home</router-link> |
 <router-link to="/about">About</router-link> |
 </div>
 <!-- 路由出⼝ -->
 <!-- 路由匹配的组件将被渲染到这⾥ -->
 <router-view/>
 </div>
</template>

打开浏览器.,切换Home和About超链接,查看效果

项目目录如下：