vue-路由-0-传参-命名-子路由

1.前言

为了更好的理解router 建议看下文章 前端路由基础
对于大多数单页面应用，都推荐使用官方支持的 vue-router 库。更多细节可以移步 vue-router 文档。
先不使用单文件组件

---

需求分析

为什么用router
有没有其他方式

SPA单页不能刷新

1. History api /home
2. hash #/home
   参看 这篇文章 前端路由基础

根据URL 显示对应的内容

router-view
数据响应式:current变量代表当前地址,一旦变化,动态重新执行 render

---

2. 基础语法

html

router-link 是一个组件，该组件用于设置一个导航链接，切换不同的HTML页面内容（组件），属性to是目标地址，本质上该组件会被渲染成一个a标签

router-view路由出口，路由跳转时匹配的路径对应的组件会将渲染到这里

        
{{msg}}
        
        
        
        

            home
            --------
            about
        
        
        
    

---

js

---

3. 路由-传参

核心是

1. 路由配置

{
// 路由路径信息中以nameID传值
    path: "/first/:nameID",
    component: First
},
{
// 动态路径  id是一个动态的数字,代表是可选的
path: "/second/:id(\\d*)?",
component: Second
    }

---

2. 使用 跟上参数

first页面

---

3.获取传值 那肯定在对应的钩子里面

    created(){
                console.log("first界面创建");
                // 组件被创建完成的方法
                console.log(this.names);
                // 当前的路由对象
                console.log(this.$route);
                // 当前路由传递的参数
                console.log(this.$route.params);
                this.selectName = this.names[this.$route.params.nameID];
            }

---

4.命名路由

4.1 命名路由 配置

核心 路由配置 加个name属性

这里强调一点 这个 路由的name属性 和组件内部的name属性 没有关系

组件内部的 name属性主要用来标识组件 调试方便

{
           // 第二种方式:通过命名式路由跳转
           path:"/home",
           name:"home",
           component:Home
        },
        {
            path:"/artD",
           name:"article",
           component:Article
        },

---

4.2命名路由使用-1

绑定 to属性
参数是 对象 键是 name 值是 上面配置的复制

小说首页 

---

4.3命名路由使用-2

直接绑定一个对象

小说首页

数据源配置

data:{
    homeObj:{
        name:"home"
    }

---

5. 命名路由传参

这个属于菜单层级的跳转
比如一级跳二级 需要传参
商品页 跳入详情页需要商品id
核心是配置 params 传参

                ---------命名式跳转:
                {{v.title}}
            

---

获取传的参数 钩子

    created(){
            console.log("ArtDetail组件创建完成!");
            //params 接收路由跳转时,url路径中的信息
            console.log(this.$route.params);
            // query 接收路由跳转时,传递的参数信息
            console.log(this.$route.query);
            // 接收路由传递过来的对象
            // this.artObj = this.$route.params.artID;
            // 或者
            this.artObj = this.$route.query.obj;
        },

---

完整的简易 结构展示如下

    
    
        

            

                
                
               
                小说首页
                -------
                小说列表
            
            
            
        
    
    
    
    
    
    
    
    

---

6. 不经常使用的 path方式

6.1 路由配置

{
            path: "/artDetail/:artID",
            component: ArtDetail
        }

6.2 使用

        

            
            小说首页
            -------
            小说列表

        
        
        
    

---

6.3组件 定义

也是拼接

---

6.4获取值

    created() {
            console.log("ArtDetail组件创建完成!");
            //params 接收路由跳转时,url路径中的信息
            console.log(this.$route.params);
            // query 接收路由跳转时,传递的参数信息
            console.log(this.$route.query);
            // 接收路由传递过来的id
            this.artObj = dataArr[this.$route.params.artID - 1];
        },

---

参考资料

vue-路由

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉