vue路由

1、安装

如果是使用vue-cli安装的，可以在开始设置的时候安装router时设置yes，如果没有则使用npm安装

npm install vue-router --save-dev

路由文件（如果使用cli安装自动生成）

		import Vue from 'vue'   //引入Vue
		import Router from 'vue-router'  //引入vue-router
		import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件
		Vue.use(Router)  //Vue全局使用Router
		export default new Router({
		  routes: [              //配置路由，这里是个数组
		    {                    //每一个链接都是一个对象
		      path: '/',         //链接路径
		      name: 'Hello',     //路由名称，
		      component: Hello   //对应的组件模板
		    }
		  ]
		})

2、使用

组建模版中导航使用

<p>导航 ：
   <router-link to="/">首页</router-link>
   <router-link to="/hi">Hi页面</router-link>
</p>

3、子路由

修改路由文件

import Vue from 'vue'   
import Router from 'vue-router'  
import Hello from '@/components/Hello'  
import Hi from '@/components/Hi' 
import Hi1 from '@/components/Hi1' 
import Hi2 from '@/components/Hi2' 
Vue.use(Router) 
export default new Router({
  routes: [             
    {                    
      path: '/',        
      name: 'Hello',     
      component: Hello   
    },{
      path:'/hi',
      component:Hi,
      children:[
        {path:'/',component:Hi},
        {path:'hi1',component:Hi1},
        {path:'hi2',component:Hi2},
      ]
    }
  ]
})

加入children属性，ps：此时的path是没有 / 的

组件模板中写法需要在组件中再加入一个插座即router-view

<p>导航 ：
      <router-link to="/hi/hi1">-Hi页面1</router-link> |
      <router-link to="/hi/hi2">-Hi页面2</router-link>
      <router-view ></router-view>
</p>

4、重定向

一行代码表示把go地址变为index

{ path: '/go', redirect:'/index'},

还有个跟重定向类似的，是路由别名形式，输入地址/asd，页面仍然是hi1 但是地址不变仍然是https://126..1/asd而重定向则是输入go地址为https://126..1/hi1

{
    path: '/hi1',
    component: Hi1,
    alias:'/asd'
 }

5、404页面

一行代码所有匹配不到的都为404组件

{ path: '*', component:404},