Vue教程6【完结】【vue-router】路由，路由传参，编程式路由导航，缓存路由组件，路由守卫，路由模式，vue ui组件库
vue-router
了解
vue插件库，用来实现SPA应用（单页面）
整个页面只有一个完整的页面
点击页面中导航链接，不会刷新页面，只做局部更新
数据通过ajax请求
路由的理解
- 一组映射关系（key-value）
- key：路径，value：function或component
前端路由
value是compoent，展示页面内容。
当浏览器路径改变时，展示对应的组件
后端路由
value是function，处理客户端提交的请求。
服务器接收到请求，根据请求路径找到匹配的函数来处理请求，返回响应数据
基本路由
安装vue-router
| vue-version | name | version |
|---|---|---|
| Vue2.x | Vuex | 3.x |
| Vue2.x | Vue-router | 3.x |
| Vue2.x | Vue-cli | 3.x 4.x |
| Vue3.x | Vuex | 4.x |
| Vue3.x | Vue-router | 4.x |
| Vue3.x | Vuex-cli | 4.x |
npm i vue-router@3.5.3
配置路由
|-src
|--router
|---index.js
===================================
import VueRouter from 'vue-router';
import About from "../components/About";
import Home from "../components/Home"
export default new VueRouter({routes: [{path: '/about',component: About},{path: '/home',component: Home},]
})
==============================================
#main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({render: h => h(App),router: router,
}).$mount('#app')
#App.vue
========================================
<template><div><div class="row"><Banner/></div><div class="row"><div class="col-xs-2 col-xs-offset-2"><div class="list-group">#实现切换active-class可配置被选中的样式<router-link class="list-group-item" active-class="active" to="/about">About</router-link><router-link class="list-group-item" active-class="active" to="/home">Home</router-link></div></div><div class="col-xs-6"><div class="panel"><div class="panel-body">#指定展示位置<router-view></router-view></div></div></div></div></div>
</template><script>
import Banner from "./components/Banner";
export default {name: 'App',components: {Banner}
}
</script>
#Home.vue,About.vue,Banner.vue
<template><div><h2>我是About的内容</h2></div>
</template><script>export default {name: "About"}
</script>
=============================================
<template><div><h2>我是Home的内容</h2></div>
</template><script>export default {name: "Home"}
</script>
================================
<template><div class="col-xs-offset-2 col-xs-8"><div class="page-header"><h2>Vue Router Demo</h2></div></div>
</template><script>export default {name: "Banner"}
</script>
注意⚠️
- 路由组件通常存放在
pages文件夹，一般组件通常存放在components文件夹- 通过切换，“隐藏”了的路由组件，默认是被销毁的，需要的时候再去挂载
- 每个组件都有自己的
$route属性，存储自己的路由信息- 整个应用只有一个router，可通过组件的
$router属性获取
嵌套路由
配置多级路由
import VueRouter from 'vue-router';
import About from "../pages/About";
import Home from "../pages/Home"
import Message from "../pages/Message";
import News from "../pages/News";
export default new VueRouter({routes: [{path: '/about',component: About},{path: '/home',component: Home,children: [{path: 'message', //不能写成“/message”component: Message},{path: 'news', //不能写成“/news”component: News}]},]
})
跳转（要写完整路径）
<template><div><h2>我是Home的内容</h2><ul class="nav nav-tabs"><li><router-link class="list-group-item" active-class="active" to="/home/news">News</router-link></li><li><router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link></li></ul><router-view></router-view></div>
</template><script>export default {name: "Home"}
</script>
路由传参
query参数
<!-- 路由跳转，携带参数，to的【字符串】写法-->
<router-link :to="`/home/message/detail?id=${item.id}&title=${item.title}`">{{item.title}}</router-link>
<!-- 路由跳转，携带参数，to的【对象】写法-->
<router-link :to="{path:'/home/message/detail',query: {id:item.id,title:item.title,}}">{{item.title}}</router-link>
<script>
data() {return {messageList: [{id: '001', title: '消息1'},{id: '002', title: '消息2'},{id: '003', title: '消息3'},]}}
</script>
#接收参数<li>消息编号：{{$route.query.id}}</li><li>消息内容：{{$route.query.title}}</li>
命名路由
使用
name，跳转地址只能使用to的对象写法，用name属性。否则会被解析成path路径
Vue教程6【完结】【vue-router】路由，路由传参，编程式路由导航，缓存路由组件，路由守卫，路由模式，vue ui组件库相关推荐
- vuejs中路由的传参以及路由props配置
虽互不曾谋面,但希望能和您成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 标星公众号(ID:itclanCoder) 如果不知道如 ...
- 每天一点点之 taro 框架开发 - taro路由及传参
1.路由 taro的路由是自带的,不需要我们额外配置,只需要我们在app.js下config中配置pages即可 class App extends Component {config = {page ...
- vue中定时器一般用法，定时器函数传参以及清除定时器
一.vue中定时器一般用法(举个例子) 显示当前时间, setInterval()方法会每秒执行一次函数,类似手表功能: <template><div class="use ...
- Django——2 路由分配设置 re_path正则匹配 include总路由 url传参 name使用 模板渲染render方法 模板渲染方法...
Django 路由分配设置 re_path正则匹配 include总路由设置 url额外参数的传递 name的使用 模板的渲染:render方法 路由的分配中, 可以设定相应的转换器加以约束,比如 ...
- vue 内打开一个新窗口，带传参！
有时在打开时会很卡,以下相对好一点: 在函数中 window.open(/newurl?index=${index} ); //带传参 2,页面上写一个空的a 动态拼接href, 如果你有更好的方式, ...
- vue以post的方式发请求，传参在url中
一.要实现的效果: http://2o66y73190.wicp.vip/sbase/list?id=111 二.实现步骤 1.在封装接口中 import { service } from '../u ...
- Vue路由传参params 与 query
一.路由传参分为 params 传参与 query 传参 1. params params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显示在地址栏中(但是不能刷新).par ...
- Vue路由传参详解（params 与 query）
Vue路由传参详解(params 与 query) 前言: 路由传参分为 params 传参与 query 传参 params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显 ...
- Vue如何进行路由传参
Vue路由传参 params参数 router-link形式传参 编程式路由导航传参 query参数 router-link形式传参 编程式路由导航传参 params和query的区别 Vue路由传参 ...
- Vue路由 传参几种方式
① 动态路由传参 {path:'detail/:username?',name:'a', component:()=>import('@/components/Detail.vue')}< ...
最新文章
- 图神经网络如何对知识图谱建模？ | 赠书
- [导入]如何用WAP手机远程遥控电脑
- angr学习笔记（2）
- ORACLE 表类型 OLTP和OLAP
- 微信小程序自定义变量使用，静态变量
- LeetCode 1487. 保证文件名唯一（哈希map）
- 【QCustomPlot】1.1 - Qt .qch帮助文档导入使用
- ※部分VB文章汇总C※
- Java自学免费视频教程
- C语言串口一直接收00,串口助手一直接收00；
- codeforces 1153D Serval and Rooted Tree
- 转行经历|裸辞九个月，终于拿到第一份工作的offer...
- 表格拖拽、树状拖拽的各种方法
- python代码实现， SIR 模型进行信息传播模拟
- 一次Linux中的木马病毒解决经历
- 元宇宙浪潮下，数智人拒绝“标品”
- python发明家_Python版多图表范例
- 2023年武汉音乐学院民族声乐考研上岸前辈备考经验
- python字典怎么增加元素_Python字典(dict)增加元素
- spring boot在启动程序之前执行逻辑
热门文章