织梦做单页面网站,管理咨询网站,做网站客户一般会问什么问题,wordpress加密授权文章目录 路由简介路由是什么路由的作用 一、路由入门案例1. 创建项目 导入路由依赖2. 准备页面和组件3. 准备路由配置4. main.js引入router配置 二、路由重定向三、编程式路由(useRouter)四、路由传参(useRoute)五、路由守卫总结 路由简介
路由是什么 路由就是根据不同的 URL… 文章目录 路由简介路由是什么路由的作用 一、路由入门案例1. 创建项目 导入路由依赖2. 准备页面和组件3. 准备路由配置4. main.js引入router配置 二、路由重定向三、编程式路由(useRouter)四、路由传参(useRoute)五、路由守卫总结 路由简介
路由是什么 路由就是根据不同的 URL 地址展示不同的内容或页面。 页面切换 路由的作用
单页应用程序SPA中路由可以实现不同视图之间的无刷新切换提升用户体验路由还可以实现页面的认证和权限控制保护用户的隐私和安全路由还可以利用浏览器的前进与后退帮助用户更好地回到之前访问过的页面。 一、路由入门案例
创建路由基本流程
页面组件准备App主体页 : 定义 路由链接 router-link to/定义 路由显示位置 router-view namehomeView js配置路由 导入路由vue-router相关依赖 createRouter 和 createWebHashHistory方法创建路由方法 声明路由规则 createRouter() path:/components:{ homeView:Home } 对外暴露router对象变量 给main.js main.js中导入router配置 import 路由js绑定路由对象 app.use(router) 需求分析 1. 创建项目 导入路由依赖
npm create vite //创建项目cd 项目文件夹 //进入项目文件夹
npm install //安装项目需求依赖
npm install vue-router4 --save //安装全局的vue-router 4版本2. 准备页面和组件
components/Home.vue
script setup
/scripttemplatedivh1Home页面/h1/div
/templatestyle scoped
/style
components/List.vue
script setup
/scripttemplatedivh1List页面/h1/div
/templatestyle scoped
/style
App.vue
script setup
/scripttemplatedivh1App页面/h1hr /!-- 路由的连接 --router-link to/home页/router-linkbr /router-link to/listlist页/router-linkbr /!-- 路由连接对应视图的展示位置 --hr /默认展示位置:router-view/router-viewhr /Home视图展示:router-view namehomeView/router-viewhr /List视图展示:router-view namelistView/router-viewhr //div
/templatestyle scoped
/style3. 准备路由配置 createWebHashHistory() 是 Vue.js 基于 hash 模式创建路由的工厂函数。在使用这种模式下路由信息保存在 URL 的 hash 中使用 createWebHashHistory() 方法可以创建一个路由历史记录对象用于管理应用程序的路由。在 Vue.js 应用中 - 通常使用该方法来创建路由的历史记录对象。 - 就是路由中缓存历史记录的对象vue-router 提供 src/routers/router.js
// 导入路由创建的相关方法
import { createRouter, createWebHashHistory } from vue-router// 导入vue组件
import Home from ../components/Home.vue
import List from ../components/List.vue// 创建路由对象,声明路由规则
const router createRouter({history: createWebHashHistory(),routes: [{path: /,components: {default: Home,homeView: Home}},{path: /list,components: {listView: List}}]
})
// 对外暴露路由对象
export default router;component 指定组件在默认的路由视图位置展示 components:Home components指定组件在name为某个值的路由视图位置展示 components:{default:Home,// 默认路由视图位置homeView:Home// name为homeView的路由视图位置
}4. main.js引入router配置
import { createApp } from vueimport App from ./App.vue
//导入router模块
import router from ./routers/router.js
let app createApp(App);
//绑定路由对象!!!
app.use(router);
app.mount(#app) 二、路由重定向 重定向的作用将一个路由重定向到另一个路由上 修改案例访问/list和/showAll都定向到List.vuerouter.js 定义routes : /showAll添加 redirect: /list
// 导入路由创建的相关方法
import { createRouter, createWebHashHistory } from vue-router// 导入vue组件
import Home from ../components/Home.vue
import List from ../components/List.vue
import Add from ../components/Add.vue
import Update from ../components/Update.vue// 创建路由对象,声明路由规则
const router createRouter({history: createWebHashHistory(),routes: [{path: /,components: {default: Home,homeView: Home}},{path: /list,components: {listView: List}},{path: /showAll,// 重定向redirect: /list},{path: /add,components: {addView: Add}},{path: /update,components: {updateView: Update}}]
})
// 对外暴露路由对象
export default router;App页面 显示 点击show 也是list页面
script setup
/scripttemplatedivh1App页面/h1hr /!-- 路由的连接 --router-link to/home页/router-linkbr /router-link to/listlist页/router-linkbr /router-link to/showAllshowAll页 重定向到list/router-linkbr /router-link to/addadd页/router-linkbr /router-link to/updateupdate页/router-linkbr /!-- 路由连接对应视图的展示位置 --hr /默认展示位置:router-view/router-viewhr /Home视图展示:router-view namehomeView/router-viewhr /List视图展示:router-view namelistView/router-viewhr /Add视图展示:router-view nameaddView/router-viewhr /Update视图展示:router-view nameupdateView/router-viewhr //div
/templatestyle scoped
/style三、编程式路由(useRouter) 普通路由 router-link to/listlist页/router-link 这种路由,to中的内容目前是固定的,点击后只能切换/list对象组件(声明式路由) 编程式路由 通过useRouter,动态决定向那个组件切换的路由在 Vue 3 和 Vue Router 4中你可以使用 useRouter 来实现动态路由(编程式路由)这里的 useRouter 方法返回的是一个 router 对象你可以用它来做如导航到新页面、返回上一页面等操作。 案例需求: 通过普通按钮配合事件绑定实现路由页面跳转,不直接使用router-link标签 App.vue
script setup
import { useRouter } from vue-router;
import { ref } from vue;
//创建动态路由对象
let router useRouter();let routePath ref();
let showList () {// 编程式路由// 直接push一个路径//router.push(/list)// push一个带有path属性的对象router.push({ path: /list });
};
/scripttemplatedivh1App页面/h1hr /!-- 路由的连接 --router-link to/home页/router-linkbr /router-link to/listlist页/router-linkbr /router-link to/showAllshowAll页 重定向到list/router-linkbr /router-link to/addadd页/router-linkbr /router-link to/updateupdate页/router-linkbr /!-- 动态输入路径,点击按钮,触发单击事件的函数,在函数中通过编程是路由切换页面 --button clickshowList()showList/buttonbr /!-- 路由连接对应视图的展示位置 --hr /默认展示位置:router-view/router-viewhr /Home视图展示:router-view namehomeView/router-viewhr /List视图展示:router-view namelistView/router-viewhr /Add视图展示:router-view nameaddView/router-viewhr /Update视图展示:router-view nameupdateView/router-viewhr //div
/templatestyle scoped
/style四、路由传参(useRoute) 路径参数 在路径中使用一个动态字段来实现我们称之为 路径参数 例如 查看数据详情 /showDetail/1 ,1就是要查看详情的id,可以动态添值 键值对参数 类似与get请求通过url传参,数据是键值对形式的 例如: 查看数据详情/showDetail?hid1,hid1就是要传递的键值对参数 在 Vue 3 和 Vue Router 4 中你可以使用 useRoute 这个函数从 Vue 的组合式 API 中获取路由对象。 useRoute 方法返回的是当前的 route 对象你可以用它来获取关于当前路由的信息如当前的路径、查询参数等。 案例需求 : 切换到ShowDetail.vue组件时,向该组件通过路由传递参数 修改App.vue文件
script setup
import { useRouter } from vue-router;
//创建动态路由对象
let router useRouter();
//动态路由路径传参方法
let showDetail (id, language) {// 尝试使用拼接字符串方式传递路径参数//router.push(showDetail/${id}/${languange})/*路径参数,需要使用params */router.push({ name: showDetail, params: { id: id, language: language } });
};let showDetail2 (id, language) {/*uri键值对参数,需要使用query */router.push({ path: /showDetail2, query: { id: id, language: language } });
};
/scripttemplatedivh1App页面/h1hr /!-- 路径参数 --router-link to/showDetail/1/JAVAshowDetail路径传参显示JAVA/router-linkbutton clickshowDetail(1,JAVA)showDetail动态路由路径传参显示JAVA/buttonhr /!-- 键值对参数 --router-linkv-bind:to{path:/showDetail2,query:{id:1,language:Java}}showDetail2键值对传参显示JAVA/router-linkbutton clickshowDetail2(1,JAVA)showDetail2动态路由键值对传参显示JAVA/buttonhr /showDetail视图展示:router-view nameshowDetailView/router-viewhr /showDetail2视图展示:router-view nameshowDetailView2/router-view/div
/templatestyle scoped
/style
修改router.js增加路径参数占位符
// 导入路由创建的相关方法
import { createRouter, createWebHashHistory } from vue-router// 导入vue组件import ShowDetail from ../components/ShowDetail.vue
import ShowDetail2 from ../components/ShowDetail2.vue// 创建路由对象,声明路由规则
const router createRouter({history: createWebHashHistory(),routes: [{/* 此处:id :language作为路径的占位符 */path: /showDetail/:id/:language,/* 动态路由传参时,根据该名字找到该路由 */name: showDetail,components: {showDetailView: ShowDetail}},{path: /showDetail2,components: {showDetailView2: ShowDetail2}},]})// 对外暴露路由对象
export default router;ShowDetail.vue 通过useRoute获取路径参数
script setup
import { useRoute } from vue-router;
import { ref, onUpdated } from vue;// 获取当前的route对象
let route useRoute();
let languageId ref(0);
let languageName ref();// 借助更新时生命周期,将数据更新进入响应式对象
onUpdated(() {// 获取对象中的参数languageId.value route.params.id;languageName.value route.params.language;console.log(languageId.value);console.log(languageName.value);
});
/scripttemplatedivh1ShowDetail页面/h1h3编号{{route.params.id}}:{{route.params.language}}是世界上最好的语言/h3h3编号{{languageId}}:{{languageName}}是世界上最好的语言/h3/div
/templatestyle scoped
/style
ShowDetail2.vue通过useRoute获取键值对参数
script setup typemodule
import { useRoute } from vue-router;
import { onUpdated, ref } from vue;
// 获取当前的route对象
let route useRoute();
let languageId ref(0);
let languageName ref();
// 借助更新时生命周期,将数据更新进入响应式对象
onUpdated(() {// 获取对象中的参数(通过query获取参数,此时参数是key-value形式的)console.log(route.query);console.log(languageId.value);console.log(languageName.value);languageId.value route.query.id;languageName.value route.query.language;
});
/scripttemplatedivh1ShowDetail2页面/h1h3编号{{route.query.id}}:{{route.query.language}}是世界上最好的语言/h3h3编号{{languageId}}:{{languageName}}是世界上最好的语言/h3/div
/templatestyle scoped
/styleuseRoute 函数用来接收参数 route.param 表示路径参数 route.query 表示键值对参数 五、路由守卫 路由守卫是用于在路由切换期间进行一些特定任务的回调函数。路由守卫可以用于许多任务例如验证用户是否已登录、在路由切换前提供确认提示、请求数据等。 全局前置守卫在路由切换前被调用可以用于验证用户是否已登录、中断导航、请求数据等。全局后置守卫在路由切换之后被调用可以用于处理数据、操作 DOM 、记录日志等。守卫代码的位置: 在router.js中
… 总结
