万象更新 Html5 - vue.js: vue 路由基础
万象更新 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 文件
],
}
