美文网首页
《图解Vue3.0》- vueRouter - 第17节 vue

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

作者: 张中华 | 来源:发表于2021-11-12 07:54 被阅读0次

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

    结果:


    相关文章

      网友评论

          本文标题:《图解Vue3.0》- vueRouter - 第17节 vue

          本文链接:https://www.haomeiwen.com/subject/znawzltx.html