在现在常用的框架中，其实都是单页应用，也就是入口都是index.html, 仅此一个html文件而已。可是实际在使用过程中，又是存在不同的页面，那么这是如何实现的呢？这就是router的功劳了，React里面有react-router，vue有vue-router。
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：
- 嵌套路由映射
- 动态路由选择
- 模块化、基于组件的路由配置
- 路由参数、查询、通配符
- 展示由 Vue.js 的过渡系统提供的过渡效果
- 细致的导航控制
- 自动激活 CSS 类的链接
- HTML5 history 模式或 hash 模式
- 可定制的滚动行为
- URL 的正确编码
安装
npm install vue-router@4
文件目录
router/index.js
import { createRouter,createWebHashHistory} from "vue-router";
const routes = [
{
path: "/page1",
name: "page1",
component: import("../components/page1")
},
{
path: "/page2",
name: "page2",
component: import("../components/page2")
}
]
const router = createRouter({
history: createWebHashHistory(),
routes,
});
export default router;
main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import router from './router/index.js'
const app = createApp(App);
app.use(store);
app.use(router);
app.mount('#app');
App.vue
<template>
<div>
<button @click="btn1">按钮1</button>
<button @click="btn2">按钮2</button>
<router-view></router-view>
</div>
</template>
<script>
import { useRouter } from "vue-router";
export default {
setup() {
const router = useRouter();
return {
router,
};
},
methods: {
btn1() {
this.router.push({
name: "page1",
});
},
btn2() {
this.router.push({
name: "page2",
});
},
},
};
</script>
page1.vue
<template>
<div>page1</div>
</template>
结果：
