vueRouter

多页应用与单页应用

多页应用
    login.html->home.html->xx.html...
    很多个页面互相跳转
单页应用
    动态重写当前页面来与用户交互，不需要重新加载整个页面
    如何实现：借助hash值实现

vue3在线库

<script src="https://unpkg.com/vue@3"></script>

vue-router插件库

<script src="https://unpkg.com/vue-router@4"></script>

html部分

     <div id="app">
		<!-- <a href="/home">首页</a> -->
		<!-- 等于a标签 -->
		<router-link to="/home">首页</router-link>
		<router-link to="/about">关于</router-link>

		<!-- 路由输出 -->
		<!-- 等于插槽，输出在这条下面 -->
		<router-view></router-view>
	</div>

逻辑部分

                <script>
			const Home = { template: '<div>首页界面</div>' }
			const About = { template: '<div>关于界面</div>' }

			const routes = [
				{
					path: '/home',
					component: Home,
				},
				{
					path: '/about',
					component: About,
				},
			]

			// 创建路由对象
			const router = VueRouter.createRouter({
				// 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
				history: VueRouter.createWebHashHistory(),
				routes, // `routes: routes` 的缩写
			})
                          
			const app = Vue.createApp({})
			app.use(router)
			app.mount('#app')
		</script>

实现效果

点击首页出现首页页面

点击关于出现关于页面