Vue 路由的简单使用(命名路由、query路由传参、params路由传参)

  1 # Vue 路由
  2 # 1.理解：一个路由(toute)就是一组映射关系（key-value），多个路由需要路由器(router)进行管理
  3 # 2.前端路由：key是路径，value是组件
  4 # 3.vue-router安装
  5 #     注意：vue-router4只能在vue3中使用、vue-router3才能用在vue2中
  6     npm i vue-router@3
  7 # 4.基本使用
  8     #main.js
  9     import Vue from 'vue'
 10     import App from './App.vue'
 11     // 引入路由
 12     import VueRouter from 'vue-router'
 13     // 引入自己配置的路由
 14     import router from './router'
 15
 16     Vue.config.productionTip = false;
 17     // use它
 18     Vue.use(VueRouter);
 19
 20     new Vue({
 21       render: h => h(App),
 22       router: router // 加载它
 23     }).$mount('#app');
 24     # ./router/index.js  自己配置路由
 25     import VueRouter from 'vue-router'
 26     import Home from '../components/Home'
 27     import About from '../components/About'
 28
 29     // 创建一个路由器
 30     export default new VueRouter({
 31         routes:[
 32         {
 33             path:'/about',
 34             component: About
 35         },
 36         {
 37             path:'/home',
 38             component: Home
 39         }
 40         ]
 41     });
 42 # 5.实现切换(active-class可配置高亮样式)
 43     <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
 44 # 6.指定展示路由组件位置
 45     <router-view></router-view>
 46 # 7.几个注意点
 47 #    .路由组件通常存放在pages文件夹，一般组件通常放在conmponents文件夹。
 48 #    .通过切换，“隐藏”了的路由，默认是被销毁掉的，需要的时候再去挂载。
 49 #    .每个组件都有自己的$route属性，里边存储着自己的路由信息。
 50 #    .整个应用只有一个router，可以通过路由组件$router属性获取到。
 51 # 8.路由的query参数
 52 #    .传递参数
 53         <!-- 跳转并携带query参数，to字段的字符串写法 -->
 54         <router-link :to="/home/message/detail?id=666&title=hello">跳转</router-link>
 55         <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">跳转</router-link>
 56         <!-- 跳转并携带query参数，to字段的对象写法 -->
 57         <router-link :to="{
 58             path:'/home/message/detail',
 59             query:{
 60                 id:m.id,
 61                 title:m.title
 62             }
 63         }">跳转</router-link>
 64 #    .接收参数：
 65         $route.query.id
 66         $route.query.title
 67 # 9.命名路由
 68 #    .作用：可以简化路由的跳转
 69 #    .给路由命名
 70         export default new VueRouter({
 71         routes:[
 72             {
 73                 name:'guanyu', // 命名路由
 74                 path:'/about', // 路劲
 75                 component: About
 76             },
 77             {
 78                 path:'/home',
 79                 component: Home,
 80                 children:[
 81                 {
 82                     path:'messages',
 83                     component: Messages,
 84                     children:[
 85                         {
 86                             name: 'xiangqing',
 87                             path: 'message',
 88                             component: MessageInfo
 89                         }
 90                     ]
 91                 },
 92                 {
 93                     path:'news',
 94                     component: News
 95                 }
 96                 ]
 97             }
 98             ]
 99         });
100 #    .简化跳转
101         <!-- 简化前，需要写完整的路劲 -->
102         <router-link to="/home/test/welcome">跳转</router-link>
103         <!-- 简化后，直接名字跳转 -->
104         <router-link :to="{name:'hello'}">跳转</router-link>
105         <!-- 简化写法，配合query传参 -->
106         <router-link :to="{
107             name:'hello',
108             query:{id: '666', title:'hello'}
109         }">跳转</router-link>
110 # 10.路由的params传参
111 #    .配置路由接受params参数
112         export default new VueRouter({
113             routes:[
114             {
115                 name:'guanyu', // 命名路由
116                 path:'/about', // 路劲
117                 component: About
118             },
119             {
120                 path:'/home',
121                 component: Home,
122                 children:[
123                 {
124                     path:'messages',
125                     component: Messages,
126                     children:[
127                         {
128                             name: 'xiangqing',
129                             path: 'message/:id/:title', // params传参
130                             component: MessageInfo
131                         }
132                     ]
133                 },
134                 {
135                     path:'news',
136                     component: News
137                 }
138                 ]
139             }
140             ]
141         });
142 #    .传递参数（特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！）
143         <ul>
144             <!-- <li v-for="(m, index) in messageList" :key="index"> <router-link :to="`/home/messages/message/${m.id}/${m.title}`">{{m.title}}</router-link> </li> -->
145             <li v-for="(m, index) in messageList" :key="index"> <router-link :to="{
146                 name: 'xiangqing',  // params 传参只能作用在命名路由上
147                 params:{
148                     id: m.id,
149                     title: m.title
150                 }
151             }">{{m.title}}</router-link> </li>
152         </ul>
153 #    .接受参数
154         $route.params.id
155         $route.params.title