Vue中的路由

Vue的路由，一般情况下有俩种使用情况 <router-view 和<router-link.

路由配置

首页我们需要先安装vue中路由所需要的环境依赖:
在执行vue init webpack myVue指令中，会询问一句是否 INSTALL vue router，选择yes就好了。
在项目初始化完成找到main.js ,在里面导入import router from ‘./router’；在这个文件中会初始化一个vue实例：
new Vue({
el: ‘#app’ ， //挂在到index.html中id为app的标签
router, // router：router es6的写法前后一样，写一个就行
components: { App },// 子组件app
template: ’ ’ //模板为组件中的内容
})
在项目初始化完成，src文件下会有一个router文件夹，我们需要在里面配置每个路由的具体内容：
import Vue from ‘vue’
import Router from ‘vue-router’

Vue.use(Router) //使用路由

export default new Router({
routes: [

{
  path: '/',   //路由的路径，输入localhost8080默认就是打开的“ / ”这个路由下的内容

  component: Home  //路由路径下的内容，component：组件名称
}

]
})

<router-link

一般使用的时候都会给一个to属性 例如：
router-link to=‘/’ 点击被这个标签包含的内容就会跳转到路由名为“/”下的内容，
有时我们还会给这个标签一个tag属性，tag的值为标签的名字

<router-view

router-view 标签是指显示当前路由下的内容，路由就是网址，就是当前网址下的内容