【Vue Router】001-感受前端路由
【Vue Router】001-感受前端路由
訾博ZiBo
发布于 2025-01-06 14:21:24
发布于 2025-01-06 14:21:24
代码可运行
运行总次数：0
代码可运行
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 对象，从而让整个应用程序具备路由功能
（已集成到第二步）
第八步：运行结果
image-20210810171124802
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')运行结果：初始页面
image-20210621161801723
运行效果：路由跳转
image-20210621161854990
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
