Vue-router路由安装配置步骤

路由安装

npm install --save vue-router

引入

import VueRouter from \"vue-router\"

创建Router

const router = new VueRouter({
	routers:[
		path: \"/index\",
		component: HelloWorld
	]
})

注入 router

new Vue({
	el:  \'#app\',
	router,
	components: { App },
	template: \'<App/>\'
})

显示路由组件

在app.vue中显示
<router-view></router-view>

路由跳转

注：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push
<router- >比写死的<a href = \"\">好一些，理由如下：
	无论是HTML5history模式还是hash模式，它的表现行为一致，所以，当你要切换路由模式，或者在IE9降级使用hash模式，无需所任何变动。
	在HTML5 history模式下，router-  会守卫点击事件，让浏览器不再重新加载页面。
	当你在HTML5 history 模式下使用 选项之后，所有的to 属性都不需要写（基路径）了。
<router-   to = \"/index\"  tag = \'p>首页</router- >
通过 to 属性控制页面跳转
通过tag属性修改显示的标签,由默认的a 标签显示为 p 标签，除了标签自带效果修改，其他不变

重定向

在routers配置中添加
{
	path : \' / \',
	redirect : \' /index \'
}

参数传递

传值： <router-  :to={ name: \'index\',params: { userId: 123 } }></router- >
配置：{ path: \'/index/:userId/:count\' }
取值：{ { $.route.params.userId} }