Vue-router是Vue.js官方的路由管理插件，可以实现单页面的应用效果，同时Vue-router支持两种模式：hash模式和history模式。下面我们从多个方面详细阐述Vue-router的这两种模式。
一、hash模式
hash模式是Vue-router的默认模式，使用URL中的hash(#)来模拟URL的变化，不会导致页面的刷新，从而实现页面的动态切换。
1、初始化
在启动Vue.js应用时，需要先安装Vuex和Vue-router插件，在main.js中初始化Vue-router并挂载到Vue实例上。
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'hash',
routes: [
{
path: '/',
component: Home,
},
{
path: '/about',
component: About,
},
]
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')
2、配置路由
在Vue-router中，通过定义路由映射关系来实现URL地址到组件的映射关系。Vue-router的路由映射关系通过routes配置项来实现。在routes中可以定义多个具体的路由信息。每个路由信息是包含了URL地址和组件模板信息的对象，其中URL地址通过path属性定义，组件模板信息通过component属性定义。
const router = new VueRouter({
mode: 'hash',
routes: [
{
path: '/',
component: Home,
},
{
path: '/about',
component: About,
},
]
})
3、路由跳转
在Vue-router中，通过编程式导航或声明式导航来实现路由的跳转。
编程式导航：通过this.$router.push()方法实现路由的跳转。
原创文章，作者：LSPA，如若转载，请注明出处：https://www.506064.com/n/136181.html
微信扫一扫 
支付宝扫一扫 