vue-router路由简单使用

router-view(根据路由的配置，自动选择组件渲染这个地方，当路由切换的时候，当前组件销毁)

例如：

在index.js当中创建一个路由器($router)

// 于创建整个应用的路由器
import VueRouter from 'vue-router'
// 引入组件
import About from '../components/About'
import Home from '../components/Home'

// 创建并暴露一个路由器
export default new VueRouter({
	routes:[
		{
			path:'/aaa',
			component:A
		},
		{
			path:'/bbb',
			component:B
		}
	]
})

当前路径为/a的时候，展示A组件 

路径为/b的时候，展示B组件

当路径切换后，原组件销毁，新组件创建并渲染页面

router-link(相当于a 但是有 to='/path' ) to代表要切换到那个路径下面(/aaa    /bbb)一级路由需要/而二级路由需要拖家带口 /aaa/ccc

传递参数的时候可以选择query也可以选择props 

//query （字符串写法） 
       
<router-link :to="/aaa/ccc/detail?id=111&title=qwe">跳转</router-link>

//（对象写法）         
to="{

     path="/aaa/ccc/detail"

     query: {

     id: 111

      title: qwe
    }
                                                }

}"

keep-alive ：缓存用户组件实例，目的在于keep-alive内部组件切换时，因为不会销毁组件，所以不需要重新创建组件实例

active-class (vue会自动帮你选择在该标签是否active(active 比如：选中某个元素的时候显示高亮或者不同用于区分))

$router: 路由对象，包含一些操作路由的功能函数

$route: 当前路由对象，一些当前路由信息数据的容器，

属性有name        path        meta        query        params等等