路由传参
明确使用场景: 后期很多业务可能需要传递参数, 如编辑时需要传递 ID
如果在路由配置中添加参数设置
- {
- name:'Product',
- // 添加路由的参数配置, 参数的标识就是:
- // id 这个名称你可以随意, 它就相当于一个形参, 它所影响不是你如何传递参数, 而是后期如何获取参数
- path:'/product/:id',
- component:Product
- }
在调用路由的时候的格式
- <!-- 这里传递不需要添加: -->
- <router-link to="/product/1">
- 水果
- </router-link>
获取路由参数
通过 $route 可以获取路由参数对象: this.$route
里面有一个 params 属性, 就存储着当前路由参数, 它是一个对象
- // 在 mounted 钩子函数中获取参数
- mounted(){
- console.log(this.$route)
- // 通过 this.$route.params 可以来获取当前的路由参数
- var id = this.$route.params.id
- if(id == 1){
- this.type = '水果'
- }else if(id == 2){
- this.type = '电器'
- }else if(id == 3){
- this.type = '服装'
- }
- }
上面代码有一问题: 无法去响应路由参数的变化, 说得具体一点: mounted 钩子函数中的代码无法响应路由参数的变化
1.mounted 钩子函数可以响应路由的变化: 因为路由变化, 需要重新加载路由所对应的组件, 如果加载组件, 那么就会执行组件的完整的生命周期, 所以 mounted 能够触发
2. 但是 mounted 钩子函数无法响应同一个路由的参数变化. 提醒一下, 当使用路由参数时, 例如从 /product/1 导航到 /product/2, 原来的组件实例会被复用. 因为两个路由都渲染同个组件, 比起销毁再创建, 复用则显得更加高效. 不过, 这也意味着组件的生命周期钩子不会再被调用
监听 (响应) 路由的变化
监听方式
处理参数的方式
- watch: {
- // 监听路由的参数的变化
- // to 是目标路由对象
- // from: 源路由对象
- '$route'(to, from) {
- var id = to.params.id
- if (id == 1) {
- this.type = '水果'
- } else if (id == 2) {
- this.type = '电器'
- } else if (id == 3) {
- this.type = '服装'
- }
- }
- }
细节:
从一个路由跳转到 / product 的效果是 mounted 在起作用
从 / product/1 到 / proudct/2, 这是 watch 在起作用
嵌套路由
为什么需要嵌套路由
实际生活中的应用界面, 通常由多层嵌套的组件组合而成. 同样地, URL 中各段动态路径也按某种结构对应嵌套的各层组件
如果需要让一个组件内部的某个部分的内容进行动态改变, 那么就需要添加嵌套路由
因为我们希望能够匹配的路由所对应的组件在某个组件内部的某个位置出现, 而不是覆盖当前页面
如何添加嵌套路由的配置
通过 children 来设置
细节: 不要在嵌套路由的 path 值中添加 /, 否则会破坏当前路由的层级
- var router = new vueRouter({
- // 3. 通过 routes 来添加路由配置, 每个路由配置都是一个对象, 里面有常用属性, 如 name,path,component,redirect
- routes: [
- {
- name: 'Index',
- path: '/index',
- component: Index
- },
- {
- name: 'Product',
- // 添加路由的参数配置, 参数的标识就是:
- // id 这个名称你可以随意, 它就相当于一个形参, 它所影响不是你如何传递参数, 而是后期如何获取参数
- path: '/product/:id',
- component: Product,
- // 添加当前路由的嵌套路由, 通过 children 来添加
- // children 是一个数组, 里面的每一个值都是一个具体的路由配置对象
- // 细节: 嵌套路由不要添加 /, 否则会造成路由层级的问题
- children:[
- {
- name:'Shui',
- path:'shui',
- component:Shui
- },
- {
- name:'Dian',
- path:'dian',
- component:Dian
- },
- {
- name:'Fu',
- path:'fu',
- component:Fu
- }
- ]
- }
- ]
- })
如何使用嵌套路由: 如何进行嵌套路由的跳转
- var Product = Vue.component('product', {
- template: `<div>{{type}}
- <button > 单击展示详细信息</button>
- // 设置嵌套路由对应组件的展示区域
- <router-view></router-view>
- </div>`,
- ......
实现嵌套路由的跳转
以前是通过 router-link 来实现路由跳转 -- 声明式导航 -
现在我们需要通过代码进行跳转 -- 编程式导航
如何实现编程式导航: 通过 this.$router.push.
- nav(){
- if (this.id == 1) {
- // 使用编程式导航跳转到嵌套路由
- this.$router.push({name:'Shui'})
- } else if (this.id == 2) {
- this.$router.push({name:'Dian'})
- } else if (this.id == 3) {
- this.$router.push({name:'Fu'})
- }
- }
案例完整代码
- <!DOCTYPE html>
- <HTML lang='en'>
- <head>
- <meta charset='UTF-8'>
- <meta name='viewport' content='width=device-width, initial-scale=1.0'>
- <meta http-equiv='X-UA-Compatible' content='ie=edge'>
- <title>
- Document
- </title>
- <script src="./lib/vue2.js">
- </script>
- <script src="./lib/vue-router.js">
- </script>
- </head>
- <body>
- <div id='app'>
- <router-link to="/index">
- 首页
- </router-link>
- <router-link to="/product/1">
- 水果
- </router-link>
- <router-link to="/product/2">
- 电器
- </router-link>
- <router-link to="/product/3">
- 服装
- </router-link>
- <h2>
- 下面是路由所对应的组件的展示区域
- </h2>
- <router-view>
- </router-view>
- </div>
- <script>
- // 添加组件
- var Index = Vue.component('index', {
- template: '<div > 首页</div>'
- }) var Product = Vue.component('product', {
- template: ` < div > {
- {
- type
- }
- } < button@click = 'nav' > 单机展示详细信息 < /button>
- <router-view></router - view > </div>`,
- data() {
- return {
- type: "??",
- id: ''
- }
- },
- methods: {
- nav() {
- if (this.id == 1) {
- / / 使用编程式导航跳转到嵌套路由this.$router.push({
- name: 'Shui',
- params: {
- username: 'jackandrose'
- }
- })
- } else if (this.id == 2) {
- this.$router.push({
- path: ` / product / $ {
- this.id
- }
- /dian`
- })
- } else if (this.id == 3) {
- this.$router.push({
- name: 'Fu'
- })
- }
- }
- },
- watch: {
- / / 监听路由的参数的变化
- // to 是目标路由对象
- // from 是源路由对象
- '$route' (to, from) {
- this.id = to.params.id
- if (this.id == 1) {
- this.type = '水果'
- } else if (this.id == 2) {
- this.type = '电器'
- } else if (this.id == 3) {
- this.type = '服装'
- }
- }
- },
- // 在 mounted 钩子函数中获取参数
- mounted() {
- console.log(this.$route)
- // 通过 this.$route.params 可以来获取当前的路由参数
- this.id = this.$route.params.id
- if (this.id == 1) {
- this.type = '水果'
- } else if (this.id == 2) {
- this.type = '电器'
- } else if (this.id == 3) {
- this.type = '服装'
- }
- }
- }) var Shui = Vue.component('shui', {
- template: '<div > 水果详细信息</div>',
- mounted() {
- console.log(this.$route)
- }
- }) var Dian = Vue.component('dian', {
- template: '<div > 电器详细信息</div>'
- }) var Fu = Vue.component('fu', {
- template: '<div > 服装详细信息</div>'
- })
- // 通过 new VueRouter 构造函数来创建路由
- var router = new VueRouter({
- // 通过 routes 来添加路由配置, 每个路由配置都是一个对象, 里面有常用属性, name,path,component
- routes: [{
- path: '/',
- // 实现重定向
- redirect: {
- name: 'Index'
- }
- },
- {
- name: 'Index',
- path: '/index',
- component: Index
- },
- {
- name: 'Product',
- // 添加路由的参数配置, 参数的标识就是:
- // id 这个名称你可以随意定义, 它就相当于一个形参, 她所影响不是你如何传递参数, 而是后期如何获取参数
- path: '/product/:id',
- component: Product,
- // 添加当前路由的嵌套路由, 通过 children 来添加
- // children 是一个数组, 里面的每一个值都是一个具体的配置对象
- // 细节: 嵌套路由不要添加 /, 否则会造成路由层级的问题
- children: [{
- name: 'Shui',
- path: 'shui',
- component: Shui
- },
- {
- name: 'Dian',
- path: 'dian',
- component: Dian
- },
- {
- name: 'Fu',
- path: 'fu',
- component: Fu
- },
- ]
- }]
- }) var vm = new Vue({
- el: '#app',
- // 挂载路由
- router,
- data: {}
- })
- </script>
- </body>
- </HTML>
嵌套路由
回顾路由中出现的关键字
VueRouter: 创建路由对象的构造函数
router:vm 实例中挂载路由的属性
routes: 配置路由的属性 -- 数组
router-view: 路由展示区域
router-link: 超链接
$route: 获取参数和对象
$router: 实现编程式导航的对象, 它有 push 方法可以实现编程式导航
Vue 学习笔记(4)- 带参数路由, 嵌套路由, 编程式导航
来源: http://www.bubuko.com/infodetail-3207972.html