开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第22天，点击查看活动详情
vue-router的安装
vue-router是什么？vue-router是vue.js官方给出的路由解决方案，只能在vue项目里使用，可以轻松管理项目中的组件的切换、
使用vue-router之前需要安装和配置，安装vue-rouer可以通过 npm install vue-router命令安装，也可以在创建vue项目的时候安装，只是通过命令安装的vue-router要自己配置
在vue项目的src目录下新建一个router文件夹，里面创建一个index.js作为vue-router的入口，配置路由模块主要分为四步:
- 导入vue和vue-router的包
- 调用
Vue.use()把vue-router作为vue的插件 - 创建路由实例对象
- 向外共享路由实例对象
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = []
const router = new VueRouter({
routes
})
export default router
路由模块配置完成了就在main.js文件里导入这个模块，将它挂载到vue实例上，路由就配置完成了
import router from './router'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
使用路由
配置完路由之后我们就可以使用路由了，当我们使用a标签进行页面的跳转，展示出不同内容，应该需要一个动态的组件来展示内容，但是在路由里不需要动态的组件，vue-router提供了一个组件 <router-view/> 它的作用就是给组件占位的占位
<a href="#/home"> home</a>
<a href="#/about"> about</a>
<a href="#/good"> good</a>
<router-view></router-view> //展示的组件的占位
而路由的概念就是哈希地址和要展示的组件的一个对应关系，现在需要声明这个对应的关系来使页面跳转的时候展示组件的内容，在路由模块里的index.js声明
//导入要展示的组件
import Home from '@/components/Home'
import About from '@/components/About'
import Good from '@/components/Good'
const routes = [ //定义hash地址与组件的对应关系
{
path:'/home', //哈希地址
component:Home //展示的组件
},
{
path:'/about',
component:About
},
{
path:'/good',
component:Good,
}
]
声明完对应关系就可以点击不同的a标签，就会展示出不同的组件了
使用router-link代替a标签
当安装和配置了vue-router之后就可以使用router-link来代替a标签，router-link有个to属性 代表要访问的地址，可以理解为a标签的href，而且不用写#号，还有一个tag属性，可以将router-link渲染成其他的属性，如button，使用router-link的效果完全和上面一样
<router-link to="/home" tag="button">Home</router-link>
<router-link to="/about" tag="button">About</router-link>
<router-link to="/good" tag="button">Good</router-link>
redirect重定向
当我们默认进入项目的时候，组件是不会被展示出来的，因为此时的路径是'/'
而组件的路径都是/home/about之类的，其实'/'也是一个哈希地址，只是没有对应的路由规则，我们希望可以默认展示某个组件，就需要用到redirect重定向：访问地址a的时候强跳转到地址b，从而展示特定的组件页面
{
path:'/',
redirect: '/home' //当哈希地址为/时强制跳转的地址
}
