vue实现hash路由
vue实现hash路由的基本原理
Vue实现hash路由主要依赖浏览器原生的hashchange事件和Vue的响应式系统。hash路由通过监听URL中#后面的变化来切换页面内容，无需向服务器发起请求。
创建路由实例
在Vue项目中，可以通过VueRouter创建路由实例。需要先安装vue-router包：
npm install vue-router然后创建路由实例并配置路由规则：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = new VueRouter({
mode: 'hash',
routes
})挂载路由到Vue实例
将创建好的路由实例挂载到Vue根实例中：
new Vue({
router,
render: h => h(App)
}).$mount('#app')使用路由视图和导航
在组件模板中使用<router-view>作为路由出口，显示匹配的组件：
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>编程式导航
除了使用<router-link>，还可以通过代码控制路由跳转：
this.$router.push('/about')
this.$router.replace('/about')
this.$router.go(-1)监听路由变化
可以通过watch监听$route对象的变化：
watch: {
'$route'(to, from) {
// 处理路由变化
}
}获取路由参数
路由组件可以通过$route对象获取参数：
// 对于/user/:id路径
const userId = this.$route.params.id
// 获取查询参数?name=value
const name = this.$route.query.name路由守卫
可以使用路由守卫控制导航：
router.beforeEach((to, from, next) => {
// 必须调用next()才能继续导航
next()
})
router.afterEach((to, from) => {
// 导航完成后的处理
})动态路由匹配
可以使用动态路径参数匹配不同模式的路由：
{ path: '/user/:id', component: User }嵌套路由
通过children属性实现嵌套路由：
{
path: '/user',
component: User,
children: [
{ path: 'profile', component: Profile }
]
}
