标签：传参 Vue 跳转 component vue router path 路由
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
标签：传参,Vue,跳转,component,vue,router,path,路由 来源： https://www.cnblogs.com/watermeloncode/p/16458152.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。