《图解Vue3.0》- vueRouter - 第17节 vue

在现在常用的框架中，其实都是单页应用，也就是入口都是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>

结果：