vue

vue2.0/vue高阶/4.归纳.md

@@ -1,20 +1,26 @@
 ## 路由
+
 1. vue-router
-* vue2.0 => 3
-* vue3.0 => 4
-* 安装：npm install vue-router@3 --save
-* vuex: npm  install vuex --save
+
+- vue2.0 => 3
+- vue3.0 => 4
+- 安装：npm install vue-router@3 --save
+- vuex: npm install vuex --save
 
 2. router.js
-  * 引入页面路径
-  * 将路径挂载到路由上
-  ```
-    {
-        path:"/路径",
-        component: 引入页面路径的名称
-    }
-  ```
+
+- 引入页面路径
+- 将路径挂载到路由上
+
+```
+  {
+      path:"/路径",
+      component: 引入页面路径的名称
+  }
+```
+
 3. App.vue
+
 ```
     跳转标签：
     router-link
@@ -22,18 +28,22 @@
         to:跳转路径地址
         active-class="active" 添加选中样式
     占位标签：
-    router-view 
+    router-view
 ```
-4. 多级路由 
-* router.js
-    1. 引入路径
-    2. 在children属性中添加路由
-    3. path路径不要加：/
 
-* router-link 
-   + to的路径完整的路径
+4. 多级路由
+
+- router.js
+
+  1. 引入路径
+  2. 在 children 属性中添加路由
+  3. path 路径不要加：/
+
+- router-link
+  - to 的路径完整的路径
 
 5. 路由的重定向
+
 ```
   {
     path:'/',
@@ -42,8 +52,55 @@
 ```
 
 6. 路由命名
-* router.js 
- + name:"xxx"
+
+- router.js
+
+* name:"xxx"
+
 ```
      <router-link active-class="active" :to="{name:'xxx'}"></router-link>
-```
+```
+
+7. query 传参
+
+```
+     <router-link active-class="active" :to="{
+        path:'/list',
+        query:{
+          names: '小郑',
+          age: 30
+        }
+      }" >去列表</router-link>
+```
+```
+    <router-link active-class="active" :to="`/list?names=小郑&age=30`" >去列表</router-link>
+  
+```
+接收query传参
+    * this.$route.query
+
+8. params传参
+```
+    动态绑定时 路由是name名称 不能是path
+      <router-link active-class="active" :to="{
+        name:'detail',
+        params: {
+          name1:'Lucy',
+          age1: 10
+        }
+      }">去详情</router-link>
+```
+```
+    router.js页面
+     {
+        路由中动态绑定参数名
+        path:'/detail/:name1/:age1',
+        name:"detail",
+        component: Detail
+     }
+     页面
+        to属性中直接传参
+      <router-link active-class="active" to="/detail/小A/10" >去详情</router-link>
+```
+接收params参数
+    * this.$route.params

vue2.0/vue高阶/project1.0/src/App.vue

@@ -4,15 +4,28 @@
     <!-- 跳转路由标签 => a标签 -->
     <h3>跳转标签</h3>
     <div class="nav">
-      <!-- <router-link active-class="active" to="/home"
+      <!-- params传参 -->
+      <!-- <router-link active-class="active" :to="{
+        name:'detail',
+        params: {
+          name1:'Lucy',
+          age1: 10
+        }
+      }">去详情</router-link> -->
+      <router-link active-class="active" to="/detail/小A/10" >去详情</router-link>
+      <router-link active-class="active" to="/home">去首页</router-link>
+      <!-- <router-link active-class="active" :to="{name:'home'}"
         >去首页</router-link
       > -->
-      <router-link active-class="active" :to="{name:'home'}"
-        >去首页</router-link
-      >
-      <router-link active-class="active" to="/list"
-        >去列表</router-link
-      >
+      <!-- query传参 -->
+      <!-- <router-link active-class="active" :to="{
+        path:'/list',
+        query:{
+          names: '小郑',
+          age: 30
+        }
+      }" >去列表</router-link> -->
+       <router-link active-class="active" :to="`/list?names=小郑&age=30`" >去列表</router-link>
     </div>
     <!-- 占位显示 -->
     <h3>显示位置</h3>

vue2.0/vue高阶/project1.0/src/router/index.js

@@ -5,6 +5,7 @@ import VueRouter from 'vue-router'
 // 1.把页面路径引入
 import Home from '../views/Home.vue';
 import List from '../views/List.vue';
+import Detail from '../views/Detail.vue';
 import Demo1 from '../components/demo1.vue';
 import Demo2 from '../components/demo2.vue';
 // 挂载vue实例
@@ -13,7 +14,7 @@ Vue.use(VueRouter)
 const routes = [
   {
     path:'/',
-    redirect: '/list'
+    redirect: '/home'
   },
   {
     // path 路径
@@ -22,9 +23,17 @@ const routes = [
     // component 组件
     component: Home
   },
+  {
+    // path 路径
+    path:'/detail/:name1/:age1',
+    name:"detail",
+    // component 组件
+    component: Detail
+  },
   {
     // path 路径
     path:'/list',
+    name:"list",
     // component 组件
     component: List,
     children:[
@@ -34,6 +43,7 @@ const routes = [
       },
       {
         path:'demo2',
+        name:'demo2',
         component: Demo2
       }
     ]

vue2.0/vue高阶/project1.0/src/views/Detail.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="detail">
+    详情页
+    <p>姓名:{{$route.params.name1}}</p>
+    <p>年龄:{{$route.params.age1}}</p>
+  </div>
+</template>
+
+<script>
+export default {
+    created(){
+        
+    console.log(this.$route.params)
+    }
+}
+</script>
+
+<style>
+
+</style>

vue2.0/vue高阶/project1.0/src/views/List.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="list">
     这是列表页
+    {{$route.query.names}}
     <div class="list-nav">
         <router-link class="tabs" to="/list/demo1">demo1</router-link>
         <router-link class="tabs" to="/list/demo2">demo2</router-link>
@@ -11,7 +12,15 @@
 
 <script>
 export default {
+    data() {
+        return {
 
+        }
+    },
+    created() {
+        console.log(this.$route.query)
+
+    }
 }
 </script>