vue路由配置路由传值编程式导航

野性酷女 2023-06-15 14:30 6阅读 0赞

### 百度小能手 ###

> 1.  路由标签`<router-link></router-link>`该组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 `<a>` 标签，可以通过配置 tag 属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。
> 2.  路径里的“/”是指默认路由，一般默认路由会配置主页的组件(下方有代码)
> 3.  vue-cli所建的项目中，项目启动默认地址（哈希路由）是`http://localhost:XXXX/#/`，带着\#，在很多环境下不允许使用，或者有缺陷，并且看起来也很别扭。我们习惯是http://localhost:XXXX/login为登录页面，以下方法可以解决：  
>     去掉\#： 在`router.js`中的`router`实例中，设置`mode: 'history'`
> 4.  一般路由会单独封装到新建的router文件夹中，以使代码模块化。(新建router.js文件后记得将接口暴露出去`export default router;`并在main.js中引入`import router from './router/route'`

{ 
                path: "/",//设置默认为主页
                component: Home,
                // redirect:"/user"
            }

### 环境配置 ###

1.  安装：`cnpm install vue-router –save`
2.  在`main.js`文件进行引入+配置

*  引入`import VueRouter from 'vue-router'`
 *  使用 `Vue.use(VueRouter);`
 *  配置

> path：路径 ；component：组件 ；name:名称 ； children:子组件

const router = new VueRouter({ 
      routes=[{ 
        path:"",
        component:"",
        children:"",
        name:""
      }]
    });

*  关联到vue

new Vue({ 
      el: '#app',
      router,
      render: h => h(App)
    });

1.  路由的入口和出口

> 点击后入口解析为a链接，并且将内容加载到出口模块中  
> ![在这里插入图片描述][20191122233518686.png]

<template>
      <div id="app">
           <div>//入口
               <router-link to="/">首页</router-link>
               <router-link to="/news">新闻</router-link>
               <router-link to="/user">我的</router-link>
           </div>
           <div>
               <router-view></router-view>//出口
           </div>
      </div>
    </template>
    
    <script>
    export default { 
      name: 'app',
      data () { 
        return { 
        
        }
      }
    }
    </script>
    
    <style></style>

### 子父路由配置 ###

> 1.  以新闻页面引入新闻详情为例，如果子组件的路径直接写为’newsdetail’,则在网页的路径上体现不出来子路径的效果。  
>     ![在这里插入图片描述][20191128161335796.png]
> 2.  每次新建的组件都要先在router.js中引入

1.  在`router.js`中声明子组件

{ 
                path: "/news",
                component: News,
                children: [
                    { 
                        path: "/news/newsdetail",//为了在路径上体现子组件
                        component: detail
                    }
                ]
    }

1.  去news页面写入口路由和出口路由

<router-link to="/news/newsdetail">{ { item.name}}</router-link>
    <div>
            <router-view></router-view>
     </div>

![在这里插入图片描述][20191128161525813.png]

### 路由重定向redirect ###

> 在router.js中声明的/默认路径配置里面添加重定向则会更改默认页面

{ 
                path: "/",
                component: Home,
                redirect:"/user"//修改默认页面为“我的”
            }

### 路由传值 ###

> **动态路由**传值，值在`this.$router.params`上；**get传值**，值在`this.$router.query`上  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]

#### 一、动态路由传值 ####

1.  在组件页面

<ul>
          <li v-for="(item,index) in msg" :key="index">
            //使用es6模板语法反编译符号解析
             <router-link :to="`/news/newsdetail/${item.id}`"> { { item.name}}</router-link>
             //或者使用字符串拼接 
            
          </li>
        </ul>

给新闻信息添加要动态传值的`id`属性

data() { 
        return { 
          msg: [
            { 
              id: 1,
              name: "华为Mate30 上线",
            },
            { 
              id: 2,
              name: "今天是****节日",
            }
          ]
        };
      }

1.  在router.js里要配`:id`

{ 
               //这里是配置动态传值
              path: "/news/newsdetail/:id",
              component: detail
      }

#### 二、`get`路由传值 ####

> 1.  直接在组件页面`query`绑定属性，如果使用params在网页路径上看不到内容；

<router-link :to="{path:'/news/newsdetail',query:{id:item.id}}">{ { item.name}}</router-link>

> 1.  去router.js配置

{ 
                //这里是配置get传值
                path: "/news/newsdetail",
     }

### 编程式导航 ###

##### 一、不带参 #####

1.  直接在方法里写路径：  
    在`router.js`中引入用户登录组件`import login from '../component/login.vue'`，并配置

{ 
                path:"/login",
                component:login
            }

1.  在主页面的登录方法里

methods:{ 
            login(){             
                this.$router.push("/login");
            }
        }

##### 二、带参 #####

> `params`传值传不过去

1.  在登录方法里

methods:{ 
            login(){             
                // 带参数的编程式导航
                this.$router.push({ 
                    path:"/login",
                    query:{ id:111}
                });
            }
        }

### 编程式导航路由返回 ###

> 在登陆界面添加返回按钮的方法

back() { 
          //路由返回
          this.$router.back(-1);
        }

[20191122233518686.png]: https://img-blog.csdnimg.cn/20191122233518686.png
[20191128161335796.png]: https://img-blog.csdnimg.cn/20191128161335796.png
[20191128161525813.png]: https://img-blog.csdnimg.cn/20191128161525813.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191128173632833.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70