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 路由的简单使用(命名路由、query路由传参、params路由传参)的更多相关文章

  1. vue 路由传参 params 与 query两种方式的区别

    初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了:  router文件下index.js里面,是这么定义路由的: { p ...

  2. vue编程式导航,命名路由

    //使用 window.location.href 的形式,叫做 编程式导航 绑定事件的形式 <template> <div class="goods-item" ...

  3. vue-router4 |name的作用|query传参|parmas传参|动态路由参数|命名视图|别名alias|前置路由守卫|路由过渡效果|滚动行为

    vue-router4 出现 No match found for location with path "/" #### router/index.ts文件 import { c ...

  4. Python--day67--Jsonresponse响应介绍和路由系统的分组命名匹配方式(简单介绍)

    1,Jsonresponse响应介绍: ,2,路由系统的分组命名匹配方式:(简单介绍)

  5. Vue学习(三)-Vue-router路由的简单使用

    一.Vue-Router环境的安装: 如果使用vue-cli脚手架搭建,项目创建过程中会提示你自否选择使用vue-router,选择使用即可, 二.路由学习 1.路由的配置    vue-cli项目自 ...

  6. vue.js路由参数简单实例讲解------简单易懂

    vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们 ...

  7. 路由传值及获取参数,路由跳转,路由检测,this.$route.query和this.$route.params接收参数,HttpGet请求拼接url参数

    配置动态路由参数id: routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] html路由跳转: <router- ...

  8. AngularJs ui-router 路由的简单介绍

    之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router ...

  9. Vue-router路由的简单使用

    一.安装路由: 如果使用vue-cli脚手架搭建,项目创建过程中会提示你自否选择使用vue-router,选择使用即可, 二.创建组件 1.vue-cli项目自动创建的路由文件是src包下面的rout ...

随机推荐

  1. MPLS L3 跨域 optionB 配置

    mpls跨域optionB optionB的核心思想是私网路由传递过程是 PE-ASBR1-ASBR2-PE2 在传递过程中私网标签发生了变化(由ASBR重新分配了私网标签),而在数据平面(不考虑PH ...

  2. 基于SqlSugar的开发框架循序渐进介绍(3)-- 实现代码生成工具Database2Sharp的整合开发

    我喜欢在一个项目开发模式成熟的时候,使用代码生成工具Database2Sharp来配套相关的代码生成,对于我介绍的基于SqlSugar的开发框架,从整体架构确定下来后,我就着手为它们量身定做相关的代码 ...

  3. 渗透:EWSA

    EWSA全称Elcomsoft Wireless Security Auditor.ElcomSoft是一家俄罗斯软件公司,出品过不少密码破解软件,涉及Office.SQL.PDF.EFS等等. EW ...

  4. 微信access_token缓存与更新

    由于Access Token有效期只有7200秒,而每天调用获取的次数只有2000次,所以需要将Access Token进行缓存来保证不触发超过最大调用次数.另外在微信公众平台中,绝大多数高级接口都需 ...

  5. 编程技巧│浏览器 Notification 桌面推送通知

    目录 一.什么是 Notification 二.弹窗授权 三.弹窗使用 四.浏览器支持检测 五.授权回调 六.3秒后关闭弹窗 一.什么是 Notification Notification 是浏览器最 ...

  6. 软件项目管理 7.5.项目进度模型(SPSP)

    [公众号@ "项目管理研究所" 将会第一时间更新文章并分享<行业分析报告>] 归档于软件项目管理初级学习路线 第七章 软件项目进度计划 你猜猜里面是什么-->&l ...

  7. Java集合框架(一)-ArrayList

    大佬理解->Java集合之ArrayList 1.ArrayList的特点 存放的元素有序 元素不唯一(可以重复) 随机访问快 插入删除元素慢 非线程安全 2.底层实现 底层初始化,使用一个Ob ...

  8. VisionPro · C# · 卸载相机

    在项目程序关闭前,需要将之前链接上的相机全部卸载,否则,关闭程序将出现弹窗报错. 解决报错,卸载相机代码如下: using System; using System.Windows.Forms; us ...

  9. rhel安装程序

    Linux下软件分类     rpm软件包,包管理器 yum     deb软件包,包管理器 apt     源代码软件包            一般为".tar.gz".&quo ...

  10. Qt数据可视化(散点图、折线图、柱状图、盒须图、饼状图、雷达图)开发实例

    ​  目录 散点图 折线图 柱状图 水平柱状图 水平堆叠图 水平百分比柱状图 盒须图 饼状图 雷达图 Qt散点图.折线图.柱状图.盒须图.饼状图.雷达图开发实例. 在开发过程中我们会使用多各种各样的图 ...