**1,**映射配置
在index.js里创建的VueRouter对象中写入相关的hash路径和相关Vue组件
const routes = [{
path: '',
//重定向设置,默认显示的hash为home
redirect: '/home'
},
{
path: '/home',
component: home
},
{
path: '/about',
component: about
}
]
然后再app.vue中添加router-link和router-view
<!-- tag可以设置组价的样式。默认为a标签 repalce可以禁用页面返回和前进 -->
<router-link to='/home' tag="button" replace="">index</router-link>
<router-link to='/about' tag="button" replace="">about</router-link>
<router-view></router-view>
**2,**将默认的hash修改为history的方法
使用hash属性时在打开网页后会出现#分隔
改为history属性后可以解决此问题
在index.js中创建的router对象里加入mode属性并将其值设为history
const router = new VueRouter({
//配置路由和组件之间的对应关系
routes,
//可以将默认的hash值改为history值
mode: 'history'
})
**3,**通过代码实现路由跳转
不用router-link实现路由跳转仅通过代码实现路由跳转的方法如下所示
<template>
<div id="app">
<button @click="homeClick">index</button>
<button @click="aboutClick">about</button>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
methods: {
//用代码的方式实现路由跳转
homeClick(){
this.$router.push('/home')
},
aboutClick(){
this.$router.push('/about')
}
},
}
注:以上文件名均是在安装脚手架后默认的文件名