1 使用 Vue Router 开发单页应用
1.1 感受前端路由
1.1.1 HTML 页面使用路由
第一步:通过 CDN 引入 Vue-Router
<!-- 引入Vue-Router -->
<script src="https://unpkg.com/vue-router@next"></script>
第二步:使用 router-link 组件设置导航链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<!-- 引入vue3 -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 引入vue-router -->
<script src="https://unpkg.com/vue-router@next"></script>
</head>
<body>
<div id="app">
<p>{{value}}</p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-view />
</div>
<script>
const RouterTest = {
data() {
return {
value: '这是一个路由演示'
}
},
}
const routes = [
{
path: '/',
component: { template: '<p>Home page</p>' }
},
{
path: "/foo",
component: { template: '<p>Foo</p>' }
},
{
path: "/bar",
component: { template: '<p>Bar</p>' }
}
];
const history = VueRouter.createWebHistory();
const router = VueRouter.createRouter({ history, routes });
Vue.createApp(RouterTest).use(router).mount('#app')
</script>
</body>
</html>
to 属性指定链接的 URL ,
<router-link>
标签默认会被渲染成一个<a>
标签 可以使用 v-slot API 完全定制<router-link>
【这里需要补充一下示例代码】
第三步:指定组件在何处渲染,这里是通过 <router-view>
指定的
<router-view></router-view>
第四步:定义路由组件
(已集成到第二步)
第五步:定义路由,将 URL 和组件对应起来
(已集成到第二步)
第六步:创建 VueRouter 实例,将路由配置传进来
(已集成到第二步)
第七步:调用 Vue 实例的 use() 方法,传入 router 对象,从而让整个应用程序具备路由功能
(已集成到第二步)
第八步:运行结果
1.1.2 模块化开发使用路由
此演示基于 vue-cli 生成的 vue 项目脚手架,创建时就导入了 vue-router 依赖(推荐)!
第一步:使用 npm 安装 Vue-Router
此步骤如果在使用 vue-cli 生成的 vue 项目脚手架时导入了 vue-router 依赖,便可省略!
npm install vue-router@next --save
第二步:在 App.vue 中使用 <router-view />
<template>
<router-view />
</template>
<style lang="scss">
</style>
第三步:创建组件 Study ,设置导航链接和组件渲染的位置
<template>
<router-link to="/">主页</router-link>
<router-link to="/news">新闻</router-link>
<router-link to="/books">图书</router-link>
<router-link to="/videos">视频</router-link>
<div>=================</div>
<router-view />
</template>
<script>
export default {
el: 'Study'
}
</script>
<style>
</style>
第四步:创建 Home、News、Books、Videos 四个组件
下面是基本内容示例
<template>
<div>主页面</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
第五步:修改 router 文件夹下的 index.js
关于路由嵌套的说明:
1、下面有以及路由导航和二级路由导航;
2、一级路由导航作用在 App.vue 下的
<router-view />
,二级路由导航作用在 Study.vue 下的<router-view />
;3、所有的一级路由导航都可以显示在 App.vue 上,每一个二级路由都可以显示在其对应的以及路由页面上;
4、实际上这里仅仅用于演示路由跳转,是不需要用到路由嵌套的,但这能使运行结果更直观地展示出跳转变化!
import { createRouter, createWebHashHistory } from 'vue-router'
import Study from '../views/Study.vue'
import Home from '../views/Home.vue'
import News from '../views/News.vue'
import Books from '../views/Books.vue'
import Videos from '../views/Videos.vue'
const routes = [
{
path: '/',
component: Study,
redirect: '/home',
children: [
{
path: '/home',
component: Home
}, {
path: '/news',
component: News
}, {
path: '/books',
component: Books
}, {
path: '/videos',
component: Videos
}
]
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
第六步:查看 main.js 文件
仅用作展示代码内容
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')