太原搭建网站的公司,常州网站制作工具,北京优化公司司,微信公众号功能介绍Vue路由
Vue中的路由#xff1a;路径和组件的映射关系
路由基本使用 下载 VueRouter 模块到当前工程#xff0c;版本3.6.5 (vue2) npm i vue-router3.6.5 main.js中引入VueRouter import VueRouter from vue-router 注册插件 App.use(VueRouter) 创建路由对象 const rou…Vue路由
Vue中的路由路径和组件的映射关系
路由基本使用 下载 VueRouter 模块到当前工程版本3.6.5 (vue2) npm i vue-router3.6.5 main.js中引入VueRouter import VueRouter from vue-router 注册插件 App.use(VueRouter) 创建路由对象 const router new VueRouter() 注入将路由对象注入到new Vue实例中建立关联 // import router from /router/index
new Vue({render: h h(App),router:router
}).$mount(#app) 配置路由规则 // 1. vue i vue-router3.6.5
// 2. import VueRouter
import Vue from vue
import VueRouter from vue-router
import FindMusic from /views/FindMusic
import MyMusic from /views/MyMusic
import FriendMusic from /views/FriendMusic
// 3. vue安装插件
Vue.use(VueRouter)
// 4.新建VueRouter对象
const router new VueRouter({
// 6.配置规则routes:[{path:/find,component:FindMusic},{path:/my,component:MyMusic},{path:/friend,component:FriendMusic}]
})
export default router 配置路由出口 router-view divdiv classfooter_wrap!-- 配置导航 --!-- vue-router 提供了一个全局组件 router-link (取代 a 标签) --!-- 1.能跳转配置 to 属性指定路径(必须) 。本质还是 a 标签 to 无需 # --!-- 2.能高亮默认就会提供高亮类名可以直接设置高亮样式 --!-- router-link-active模糊匹配 router-link-exact-active精准匹配--router-link to/find发现音乐/router-linkrouter-link to/my我的音乐/router-linkrouter-link to/friend朋友/router-link/divdiv classtop!-- 配置路由出口 --router-view/router-view/div
/div
声明式导航--路由传参 查询参数传参 动态路由传参
查询参数传参 如何传参 router-link to/path?参数名值/router-link 如何接受参数 固定用法$route.query.参数名
动态路由传参 配置动态路由 动态路由后面的参数可以随便起名但要有语义 const router new VueRouter({routes: [...,{ // /search/:words 表示必须要传参数。如果不传参数也希望匹配可以加个可选符path: /search/:words, component: Search }]
}) 配置导航链接 to/path/参数值 对应页面组件接受参数 $route.params.参数名 params后面的参数名要和动态路由配置的参数保持一致
查询参数传参 VS 动态路由传参 查询参数传参 (比较适合传多个参数) 跳转to/path?参数名值参数名2值 获取$route.query.参数名 动态路由传参 (优雅简洁传单个参数比较方便) 配置动态路由path: /path/:参数名 跳转to/path/参数值 获取$route.params.参数名 注意动态路由也可以传多个参数但一般只传一个
重定向
{ path: 匹配路径, redirect: 重定向到的路径 },
比如
{ path:/ ,redirect:/home }
404
配置在其他路由规则的最后面\
path: * (任意路径) – 前面不匹配就命中最后这个
import NotFind from /views/NotFind
const router new VueRouter({routes: [...{ path: *, component: NotFind } //最后一个]
})
编程式导航--两种路由跳转
编程式导航用JS代码来进行跳转
两种语法 path 路径跳转 简易方便 name 命名路由跳转 (适合 path 路径长的场景)
path路径跳转
特点简易方便
//简单写法
this.$router.push(路由路径)
//完整写法
this.$router.push({path: 路由路径
})
传参 query传参
//简单写法
this.$router.push(/路径?参数名1参数值1参数2参数值2)
//完整写法
this.$router.push({path: /路径,query: {参数名1: 参数值1,参数名2: 参数值2}
}) 动态路由传参
//简单写法
this.$router.push(/路径/参数值)
//完整写法
this.$router.push({path: /路径/参数值
})
name 命名路由跳转
特点适合 path 路径长的场景 路由规则必须配置name配置项 { name: 路由名, path: /path/xxx, component: XXX }, 通过name来进行跳转 this.$router.push({name: 路由名
})
传参 query传参
this.$router.push({name: 路由名字,query: {参数名1: 参数值1,参数名2: 参数值2}
}) 动态路由传参
this.$router.push({name: 路由名字,params: {参数名: 参数值,}
})
