首页 > 其他分享 >万象更新 Html5 - vue.js: vue 路由基础

万象更新 Html5 - vue.js: vue 路由基础

时间:2024-09-24 11:14:06浏览次数:8  
标签:vue 万象更新 js import msg router 路由

源码 https://github.com/webabcd/Html5
作者 webabcd

万象更新 Html5 - vue.js: vue 路由基础

示例如下:

vue\router\sample1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 路由基础</title>
    <script src="../../node_modules/vue/dist/vue.global.js"></script>
    <script src="../../node_modules/vue-router/dist/vue-router.global.js"></script>
</head>
<body>

<div id="root"></div>
<!--先通过 npm run build:vue 编译-->
<script src="main.iife.js"></script>

</body>
</html>

vue\router\router.js

import VueRouter from 'vue-router';
import Home  from './Home.vue';
import About  from './About.vue';

const Login = { template: '<div>我是 login 页</div>' };

// 配置路由规则
const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/login', component: Login },
];

// 创建路由实例
const router = VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(), // 指定 history 的实现方式
    routes, // 指定路由规则(这种写法是 es6 支持的简写法,写全了其实是 routes: routes)
});

export default router

vue\router\main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router';

const app = Vue.createApp({
    router,                 // 指定路由规则(这种写法是 es6 支持的简写法,写全了其实是 router: router)
    components: { App },    // 组件
    template: '<app/>'      // 模板(页面上会显示 <app/> 然后被 App 组件渲染)
});
app.use(router); // 使用指定的路由规则
app.mount('#root');

vue\router\App.vue

<!--注:rollup 中需要通过 rollup-plugin-vue 处理 .vue 文件-->

<template>
    <h1>{{ msg }}</h1>
    <p>
        <!--
            通过 router-link 组件做导航,通过它的 to 属性指定链接
            router-link 会被编译为类似这样 <a href="#/about">go to about</a>
        -->
        <router-link to="/">go to home</router-link>
        <br>
        <router-link to="/about">go to about</router-link>
        <br>
        <router-link to="/login">go to login</router-link>
    </p>
    <!--
        路由匹配到的组件会在 router-view 中渲染
    -->
    <router-view></router-view>
</template>

<script>
    export default {
        data () {
            return {
                msg: "我是全局页"
            }
        }
    }
</script>

vue\router\Home.vue

<!--注:rollup 中需要通过 rollup-plugin-vue 处理 .vue 文件-->

<template>
    <div>
        {{msg}}
    </div>
</template>

<script>
    export default {
        data () {
            return {
                msg: "我是 home 页"
            }
        }
    }
</script>

vue\router\About.vue

<!--注:rollup 中需要通过 rollup-plugin-vue 处理 .vue 文件-->

<template>
    <div>
        {{msg}}
    </div>
</template>

<script>
    export default {
        data () {
            return {
                msg: "我是 about 页"
            }
        }
    }
</script>

vue\router\rollup.config.js

import vue from 'rollup-plugin-vue';

export default {
    input: './vue/router/main.js',
    output: {
        name: 'VueRouterSample',
        file: './vue/router/main.iife.js',
        format: 'iife',
        globals: {
            'vue': 'Vue',
            'vue-router': 'VueRouter'
        }
    },
    plugins: [
        vue(), // 处理 .vue 文件
    ],
}

源码 https://github.com/webabcd/Html5
作者 webabcd

标签:vue,万象更新,js,import,msg,router,路由
From: https://www.cnblogs.com/webabcd/p/18428773/html5_vue_router_sample1

相关文章