router-view、router-link属性、动态路由的使用、路由嵌套、路由传参

1、router-view可以理解为一个占位符，用来给当前url映射的组件占位的，当前url映射的组件会替换掉

2、router-link是一个全局组件，可以在任何一个vue组件中使用

3、动态路由：路由中的path是动态的，根据传参来显示对应的页面

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path: '/', //等价于 path: ''redirect: '/home' },{path: '/home',name: 'home',component: () => import('../views/home.vue')},{path: '/about',name: 'about',component: () => import('../views/about.vue')},{path: '/user/:userName/:useAge',name: 'user',component: () => import('../views/user.vue')}
]const router = new VueRouter({mode: 'history', //指定为history模式base: process.env.BASE_URL,routes,linkActiveClass: 'active' //给当前处于活跃状态的 router-link 添加一个 class:'active'
})export default router

<template><div id="app"><!-- router-link默认渲染为a标签，tag可以指定渲染为某个标签 --><router-link to="/home" tag="button" >首页</router-link>&nbsp;  <!-- replace无法通过 浏览器的返回按钮 返回上一页 --><router-link to="/about" replace>关于</router-link>&nbsp;  <router-link :to="'/user/'+name">用户</router-link>&nbsp;  <router-view/></div>
</template>
<script>
export default {data() {return {name: 'Tom'}}
}
</script><style lang="less">
#app {font-size: 12px;// 给当前处于活跃状态的 router-link 的文字设置为红色.active {color: red;}
}
</style>

// user.vue
<template><div class="user">user<div>当前用户为：{{$route.params.userName}}</div></div>
</template>

注意：
this.router指的是constrouter=newVueRouter()中的router，代表整个router；this.router 指的是 const router = new VueRouter() 中的router ，代表整个router； this.router指的是constrouter=newVueRouter()中的router，代表整个router；this.route 指的是当前处于活跃状态的路由对象，例如：

 {path: '/user/:userName/:useAge',name: 'user',component: () => import('../views/user.vue')}

4、路由嵌套

 . . . {path: '/home',name: 'home',component: () => import('../views/home.vue'),children: [{path: '/', //等价于 path: ''redirect: 'homeNews' },{path: 'homeNews',name: 'homeNews',component: () => import('../views/homeNews.vue'),},{path: 'homeMessage',name: 'homeMessage',component: () => import('../views/homeMessage.vue'),}]},. . .

// home.vue<template><div class="home"><div>home</div><router-link to="/home/homeNews">新闻</router-link>&nbsp;<router-link to="/home/homeMessage">消息</router-link><router-view/></div>
</template>

结果：

5、路由传参

params：

 {path: '/user/:userName/:useAge',name: 'user',component: () => import('../views/user.vue')}跳转路由并携带params参数，to的字符串写法：<router-link :to="`/user/${myName}/${myAge}`">用户</router-link>data() {return {myName: 'tm',myAge: '18'}}this.$router.push(`/user/${this.myName}/${this.myAge}`)

 {path: '/user',name: 'user',component: () => import('../views/user.vue')}跳转路由并携带params参数，to的对象写法(只能用name，不能用path)：<router-link :to="{name: 'user',params: {userName: myName,useAge: myAge}}">用户</router-link>data() {return {myName: 'tm',myAge: '18'}}this.$router.push({name: 'user',params: {userName: this.myName,useAge: this.myAge}})

获取数据：

this.$route.params.userName
this.$route.params.userAge

query：

跳转路由并携带query参数，to的对象写法（path，name都能用）：
<router-link :to="{path: '/profile', query: {name: myName ,age: myAge}}">档案</router-link>跳转路由并携带query参数，to的字符串写法：
<router-link :to="`/profile?name=${myName}&age=${myAge}`">档案</router-link>data() {return {myName: 'tm',myAge: '18'}
}this.$router.push({path: '/profile',query: {name: this.myName, age: this.myAge}})

获取数据：

this.$route.query.name

query结合props
1、对象写法

//about.vueprofileClick() {this.$router.push({name: 'profile',query: {name: 'tm',age: 18}})}

  {path: '/profile',name: 'profile',meta: {title: '档案'},props($route) {return {bb: $route.query.name, cc: $route.query.age}},component: () => import('../views/profile.vue')},

//profile.vue
<h5>{{bb}}-{{cc}}</h5>props: ['bb', 'cc'],

2、字符串写法

this.$router.push(`/profile?name=tm&age=18`)

params结合props
1、字符串写法

//about.vueprofileClick() {this.$router.push(`/profile/tm/18`)}

{path: '/profile/:name/:age',name: 'profile',meta: {title: '档案'},props($route) {return {bb: $route.params.name, cc: $route.params.age}},component: () => import('../views/profile.vue')},

//profile.vue<h5>{{bb}}-{{cc}}</h5>props: ['bb', 'cc'],

1、对象写法

 profileClick() {this.$router.push({name: 'profile',params: {name: 'tm',age: 18}})}

  {path: '/profile',name: 'profile',meta: {title: '档案'},props($route) {return {bb: $route.params.name, cc: $route.params.age}},component: () => import('../views/profile.vue')},

  <h5>{{bb}}-{{cc}}</h5>props: ['bb', 'cc'],

router-view、router-link属性、动态路由的使用、路由嵌套、路由传参相关推荐

路由之间的转跳及传参
跳转路由之间的转跳可以通过两种方式实现: 1.通过官方提供的router-link标签实现,它与a标签相似,给我们提供跳转到某个路由的功能. 用法: <router-link to=" ...
【微信小程序-原生开发】实用教程09 - 可滚动选项，动态列表-步骤条（含事件传参），动态详情（含微信云查询单条数据 doc）
开始前,请先完成圆梦宝典中滚动公告栏的开发,详见 [微信小程序-原生开发]实用教程 08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据 ...
VUE二级/多级路由配置方式（嵌套路由）
二级路由中path写法不同对应router-link标签to属性的不同写法二级路由配置path:"/XXX",path中带/ ,则对应的路由导航router-link中的to属性 ...
vuel路由间通讯_vue嵌套路由之间的通信（非vuex方法实现）
1.先在main.js里生成一个自定义事件 2.这是我路由设置的嵌套路由 3.用法: 父路由接收子路由用自定义事件子路由里的事件绑定 : this.$root.myEvent.$emit(" ...
uniapp php交互,uni-app路由跳转及参数的传参和接收
1.保留当前页面,跳转到应用内的某个页面,使用uni.navigateTo: 示例: 在起始页面跳转到test.vue页面并传递参数 uni.navigateTo({ url: 'test?id=1& ...
【vue-route路由配置+路由router三种跳转方式+两类传参queryparams】
PS:个人总结笔记简单说下,很粗略,入门级 1.vue-route路由配置 import Vue from 'vue' import VueRouter from 'vue-router'//使用V ...
id vue2路由传参_Vue2.0中 $route 和 $router 的区别
在做Vue项目时,在路由设置和跳转时有没有遇到过 $route 和 $router?乍一看,两个看起来几乎一模一样,有点傻傻分不清楚,他们到底有什么区别?在什么情况下用呢? 我们把这2个在控制台打印出 ...
几个经常用到的angular路由Router、ActivatedRoute 知识点：嵌套路由、路由跳转、路由传参、路由参数获取
深度玩家可移步Angular - 常见路由任务 1.嵌套路由 const routes: Routes = [{path: 'first',component: FirstComponent,//同步 ...
vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）
this.$router.push进行编程式路由跳转传参 router中路由配置组件home点击传参组件homeDetails接受参数 router中路由配置 params第一种传参路由配置 {p ...
vue-router详尽：编程式导航、路由重定向、动态路由匹配、路由别名、嵌套路由、命名视图
vue-router编程式导航在vue项目中经常用到this.$router.push() 和 this.$router.replace() 方法进行路由跳转就是编程式导航... 通俗理解编程式导航 ...

router-view、router-link属性、动态路由的使用、路由嵌套、路由传参

router-view、router-link属性、动态路由的使用、路由嵌套、路由传参相关推荐

最新文章

热门文章