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

重定向

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

参数传递

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