路由vue-router

一、路由的配置环境

步骤：

1）、vuejs中的路由需要载入vue-router

在创建项目的时候，vue-router未下载，则需要用dos命令下载vue-router

dos命令为

npm install vue-router --save-dev

2）在js中引入路由

import VueRouter from 'vue-router'

3）启动路由

Vue.use(VueRouter);

4）创建路由实例

var router = new VueRouter({
	routes:[
		{
		    path:"/coma",
		    components:{
			default:test,
			a:test2
		    }
		},
		{
		    path:"/comb",
		    component:test2
		},
		{
		 path:"/user/:userName",
		 component:test
		}
	]
})

5）在vue实例对象中注册该路由实例

上述已经配置好路由的环境，下面讲述一下路由的使用

二、路由的使用

html代码：

<div id="app"> 
 <h1>Hello App!</h1>  
  <p>   
 <!-- 使用 router-link 组件来导航. -->    
 <!-- 通过传入 `to` 属性指定链接. -->    
 <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->    
   <router-link to="/coma">Go to coma</router-link>    
   <router-link to="/user/index">Go to user/index</router-link>  
 </p>  
 <!-- 路由出口 -->  
 <!-- 路由匹配到的组件将渲染在这里 -->  
  <router-view></router-view>
 </div>

当一个路由中有多个组件时，则需要给组件取名字，并且router-view相对应的name为该名称，以防路由匹配到的组件渲染不完全。

var router = new VueRouter({
	routes:[
		{
		   path:"/coma",
		   components:{
			default:test,
			a:test2
		   }
		},
        ]
    })

html代码：

<div id="app">
  <router-link to="/coma">Go to coma 
</router-link>
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
  <router-view name="a"></router-view>
</div>

三、子路由

如果已经到达父路由的组件中，则前面可以不用写上父路由的