前端有个onhashchange事件,监听浏览器hash值得变化
手动监听路由:
created() {
window.onhashchange = () => {
console.log("监听到了hash的变化", location.hash)
switch (location.hash) {
case '#/home':
this.comName = 'Home';
break
case '#/about':
this.comName = 'About';
break
case '#/movie':
this.comName = 'Movie';
break
}
}
},
安装路由包:
vue i vue-router@3.5.2 -S
新建router/index.js
1.导入vue和vueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'
2.调用Vue.use()函数,把VueRouter变为Vue的插件
Vue.use(VueRouter)
3.创建路由的实例对象
const router =new VueRouter()
4.向外共享路由的实例对象
export default router
使用方法:
1.需要展示的地方插入<router-view></router-view>标签
2.router文件夹下index.js文件中导入vue组件
3.实例对象中建立hash与组件的对应关系
const router = new VueRouter({
routes [
{path:'/hash值',companent:组件名}
]
})
子路由:
routes [
{path:'/hash值',companent:组件名,redirect:需要重定位的hash地址,children[
{path:'hash值',companent:组件名}
]}
]
默认子路由:当其中的path值为空时,它就是默认子路由
routes [
{path:'',companent:组件名,redirect:需要重定位的hash地址,children[
{path:'hash值',companent:组件名}
]}
]
动态路由匹配:
将path后面指定hash值改为:id从而实现动态跳转
{ path: '/movie/:id', component: Movie, props: true },
编程式导航API:
1.this.$router.push('hash地址')
跳转到指定的hash地址,并增加一条历史记录
2.this.$router.replace('hash地址')
跳转到指定的bash地址,并替换掉当前的历史记录
3.this.$router.go(数值n)
//通过$router.back()方法进行实现后退历史记录
<button @click="$router.back()">后退</button>
//通过$router.forward()方法实现前进历史记录
<button @click="$router.forward()">前进</button>
导航守卫:
控制路由访问权限