Vue路由相关配置
什么是路由?
1、在以前页面跳转使用的是超链接a标签或者js location.href,而路由是跳转切换组件的跳转方式
2、路由就是监听url的改变并提供相对应的组件用于展示
3、vue-router官方提供的路由,在vue中vue-router则为vue提供的url监听并提供组件展示的js,也是vue全家桶中的最重要知识点之一
使用
第一步:引入
引入vue-router
<script></script>标签引入
第二步:创建展示的组件
let news = {
template:"<h1>这是新闻页面</h1>"
}
第三步:创建路由规则
{
//path为要监听的路径
path:"/",
//component为监听到url中是/则提供index这个组件用于展示
component:index
},
第四步:把上面创建的路由对象添加到Vue实例中
//创建路由对象
let router = new VueRouter({routes})
new Vue({
el:"#app",
data:{},
router
})
第五步:在页面上添加标签<router-view></router-view>为路由渲染组件的容器
第六步:使用<router-link></router-link>进行组件之间的跳转
to:与a标签中的href一样设置跳转地址、跳转路由
路由参数传递与获取
一、得值:
在组件中使用
跳转传值
1、<router-link to="/news?type=国际新闻">新闻</router-link>
<router-link to="/shopping/衣服/小红/18/西永">商品</router-link>
2、js控制跳转并传值
query传值用路径
this.$router.push({"path":"news",query:{type:'国际新闻'}})
params传值用name
this.$router.push({name:"news",params:{type:1,name:1,age:1,address:1}})
// this.$router.push("/news");
// this.$router.push({path:"/news"})
// this.$router.push({path:"/news",query:{type:'国际新闻'}})
this.$router.push({name:"shopping",params:{type:"鞋子",name:"二狗",age:10,address:"409"}})
this.$route得值
分为两种获取方式
params:获取动态参数在路由中以:xxx设置的参数
query:获取get传递参数路由中没有设置的参数
注意:跳转时 path跳转用query传值
跳转是 name跳转用动态传值params
嵌套路由
嵌套路由与普通路由其实没区别只是多了一个children[]包裹子路由而已
{
path:"/index",
name:"index",
component:index,
children[
{
name:"index-1",
path:"a",
component:a
},{
name:"index-1",
path:"a",
component:a
}
]
}
路由模块化
不同模块为不同的路由文件
1、需要使用一个空的组件作为承载子组件
Vue路由相关配置的更多相关文章
- vue路由的配置
一.准备工作 1安装vue-cli npm install vue-cli -g 2检查是否安装成功 vue -V(大写V) 3初始化一个新的项目 vue init webpack vue-dem ...
- Vue 路由模块化配置
博客地址:https://ainyi.com/77 企业运营后台页面很多,路由如若不区分模块化配置,所有路由挤在同一个文件将不好维护,所以路由的配置也要模块化 分享两个解决方案 -- Vue 路由配置 ...
- 「vue基础」一篇浅显易懂的 Vue 路由使用指南( Vue Router 上)
大家好,今天的内容,我将和大家一起聊聊 Vue 路由相关的知识,如果你以前做过服务端相关的开发,那你一定会对程序的URL结构有所了解,我没记错的话也是路由映射的概念,需要进行配置. 其实前端这些框架的 ...
- vue 路由缓存 路由嵌套 路由守卫 监听物理返回
最近开发vue项目,遇到的一些问题,这里整合一下,看到一些博客已经有写相关知识,然后自己再次记录一下. 这是关于vue路由相关比较常见的问题,以后遇到相关路由的问题,会不断更新这篇博客. 需求1:从填 ...
- vue 模块化 路由拆分配置
一.普通路由配置 通常我们编写vue路由配置都会写在 /src/router/index.js 这个文件下.但是,随着我们的vue项目变得越来越大后,路由也随之变得越来越多,出现的问题就是我们所有的路 ...
- Vue项目上线环境部署,项目优化策略,生成打包报告,及上线相关配置
Node.js简介 Node.js是一个基于Chrome V8引擎的JavaScript运行环境,用来方便快速地搭建易于扩展的网络应用.Node.js使用了一个事件驱动.非阻塞式I/O的模型,使其轻量 ...
- vue路由的两种模式配置以及history模式下面后端如何配置
vue路由的两种模式配置以及history模式下面后端如何配置 1.hash ——即地址栏URL中的#符号.hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变has ...
- vue 路由(二级)配置及详细步骤
1.安装插件(可以选择在初始化项目的时候安装) cnpm install vue-router --save-dev 2.将插件全局引入到项目中(main.js) import VueRouter f ...
- vue开发路由相关基础知识和笔记
路由实现:hash模式 和 history模式 hash模式: 概述 在浏览器中符号"#",#以及#后面的字符称之为hash,用window.location.hash读取: 特点 ...
随机推荐
- BitmapFactory之Options
package com.loaderman.customviewdemo; import android.app.Activity; import android.graphics.Bitmap; i ...
- 利用pathMeasure实现路径动画
package com.loaderman.customviewdemo; import android.animation.ValueAnimator; import android.content ...
- js 点击列表li,获得当前li的id
html <ul id="demo"> <li id="li-1">li1</li> <li id="li- ...
- toast提示信息获取和Monkey笔记
获取toast toast提示信息出现场景:用户输入用户名和密码后,提示的'登录成功', 用之前的定位方法获取不了,需要Uiautomator2来获取 安装node.js (使用 npm 或 node ...
- winform软件版本检测自动升级开发流程(转)
注:按此博文试验OK 基于C/S的开发有开发效率高,对于业务逻辑复杂,且不需要外网使用具有较大优势,但是弊端也不可忽视,就是升级麻烦,不可能每写一个版本就要拿着安装包给每个人去替换,这样不仅搞得自己很 ...
- 页面被iframe与无刷新更换url方法
页面被iframe问题解决方法 if (window.top.location !== window.self.location) { const data = JSON.stringify({ if ...
- vs2012编译的程序不能在XP和2003下执行问题的解决方法
问题如题,通过无数次百度和谷歌后,发现,微软已经确认这是一个缺陷,安装Vs2012的update 3的升级包就可以解决问题.同时,在分发包的地方,vcredist_x86.exe 随程序分发一份就可以 ...
- css 命名规范参考[转]
命名空间 另外最好的实践就是当命名你的类名的时候,使用命名空间前缀来进行分类.这些前缀会在你的命名前添加一组字符,但是这个值能立刻标记每一个类的目的,在你看 HTML 或者样式的时候是很需要的.我使用 ...
- Vue3 相比 vue2
Vue3 使用Proxy替代了defineProperty. Proxy 相比于 defineProperty 的优势 Object.defineProperty() 的问题主要有三个: 不能监听数组 ...
- JMeter接口自动化学习笔记(一)
实例教程:https://blog.csdn.net/kasijia/article/details/79405815 https://www.cnblogs.com/rd-ddddd/p/95782 ...