木灵鱼儿
阅读:1982
Vue 路由
基本写法
首先引入vue的插件router,地址:https://unpkg.com/vue-router/dist/vue-router.js
下载后head引入,然后创建好html的标签:
<div id="app">
<ul>
<li>
<router-link to="/">主页</router-link>
</li>
<li>
<router-link to="/list">列表</router-link>
</li>
<li>
<router-link to="/about">关于</router-link>
</li>
</ul>
<router-view></router-view>
</div>
使用router-link标签to属性表示路径,使用router-view用于显示组件入口.
var home = Vue.component('my-home',{
template : '<h2>主页</h2>'
});
var list = Vue.component('my-list',{
template : '<h2>列表</h2>'
});
var about = Vue.component('my-about',{
template : '<h2>关于</h2>'
});
我们再创建三个组件用于显示,可以使用Vue.extend或者Vue.component,都要用一个变量引用.
var routes = [
{path:'/',component:home},
{path:'/list',component:list},
{path:'/about',component:about},
{path:'*',redirect:'/'}
];
创建一个数组变量,里面使用对象来编写路由路径,每个{}表示一个路由页面,path则是浏览器地址栏显示的地址,component的参数为之前创建的组件的变量名.
其中{path:'*',redirect:'/'}表示重定向,一般写在最末尾,表示当地址栏指向的地址非指定好的path时,会自动跳转到home,类似于404提示.
var router = new VueRouter({
routes : routes
});
路由配置文件写好后自然要创建路由了,new VueRouter创建路由实例,routes的值要为刚刚创建的配置文件routes变量,我们也可以写简写形式,如:
var router = new VueRouter({
routes
});
直接传入这个配置的变量名即可.
至此路由创建完毕,我们还需要在对应的vue中引用才可以正常使用.
var app = new Vue({
el : '#app',
router
});
在对应的Vue实例中加上router即可.
二级路由
一般来说不可能就只有一个一级路由,二级路由甚至三级路由,等等,我们现在就可以看看二级路由.
假设我要在一级路由显示的biz组件里面再加两个路由地址,然后这两个二级路由也有对应的router-view;
首先创建一个Biz组件
var Biz = Vue.component('my-biz',{
template : '<div>\
<h2>二级路由</h2>\
<ul>\
<li><router-link to="/biz/list">二级路由1</router-link></li>\
<li><router-link to="/biz/about">二级路由2</router-link></li>\
</ul>\
<router-view></router-view>\
</div>'
});
html上加上这个路由链接元素
<div id="app">
<ul>
<li>
<router-link to="/">主页</router-link>
</li>
<li>
<router-link to="/list">列表</router-link>
</li>
<li>
<router-link to="/about">关于</router-link>
</li>
<li>
<router-link to="/biz">Biz</router-link>
</li>
</ul>
<router-view></router-view>
</div>
路由器配置
var routes = [
{path:'/',component:home},
{path:'/list',component:list},
{path:'/about',component:about},
{path:'/biz',component:Biz,
children:[
{path:'list',component : {
template : '<h3>二级路由进来了1</h3>'
}},
{path:'about',component:{
template : '<h3>二级路由进来了2</h3>'
}}
]
},
{path:'*',redirect:'/'}
];
在biz的对象中添加一个children数组,表示子路由,里面也是一样有path,component,注意子路由path不需要反斜杠表示.component里面template和平时写的一样,你可以直接写html文本,也可以用#xx 获取htm文件中的对应的组件.
基本二级路由就完成了,如果三级路由就继续这样嵌套就行了,但是vue不建议嵌套太多,本身就是作为单页面app开发用的
注意:
组件的html文本必须要有一个根元素将所有的内容包裹
路由匹配
如果我们要复用一个组件,只是路径名发生了变化,就可以使用路由匹配,比如一个user的组件,不同id的用户都要用这个组件来渲染,我们可以通过匹配他后面带的用户名参数来判断.
var Biz = Vue.component('my-biz',{
template : '<div>\
<h2>二级路由</h2>\
<ul>\
<li><router-link to="/biz/list/foo">二级路由1</router-link></li>\
<li><router-link to="/biz/about/bar">二级路由2</router-link></li>\
</ul>\
<router-view></router-view>\
</div>',
watch : {
'$route'(to,from) {
console.log(to)
console.log(from)
}
}
});
我们对Biz组件加多一级路径,一个/foo,一个/bar,然后使用watch监听这个路由的变化,to是最新路由地址,from则是过去的路由地址,这两个都是一个对象,里面的params可以拿到路由匹配的东西,前提是路由配置哪里已经设置好了.否则只能通过path属性来查看完整路由地址.
var routes = [
{path:'/',component:home},
{path:'/list',component:list},
{path:'/about',component:about},
{path:'/biz',component:Biz,
children:[
{path:'list/:name',component : {
template : '<h3>二级路由进来了1{{$route.params.name}}</h3>'
}},
{path:'about/:name',component:{
template : '<h3>二级路由进来了2{{$route.params.name}}</h3>'
}}
]
},
{path:'*',redirect:'/'}
];
我们再biz的二级路由上加上了一个/:name,这样表示自动匹配/后面的内容,并且在params中name:xxx的键值对的形式存在,这个name可以自己自定义名字.
在template中插入{{$route.params.name}}来获取到对应的name.
事实上我们还可以进行多个匹配,无非就是/:name/:id/:user这种形式写法,中间也可以使用普通路径/:name/path/:id这样,都是可以的,只要进入了这个对应的路由,params都可以获取到对应的路由地址的值.
*全匹配符号
这个符号可以理解为正则中的*任意字符匹配,他连/也可以匹配到,比如我有一个路由地址为/user-aaa/sadad/asdasda,使用全匹配可以这样写/user-*
,然后就可以自动匹配到后面所有的值.当然你可以限制一下,比如到sa结束/user-*sa
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
实现一个点击空白区域关闭显示的自定义指令
typescriptimport type { DirectiveBinding } from "vue"; export default { bind(el: HTMLElement, binding: DirectiveBinding<Function>) { //声明一个给document绑定的事件 function documentClick(event: Event) { const target = event.target as unknown as Node; if (el.contains(t...
使用vue2.7的一些踩坑事项
eslint校验的一些问题(暂时无解)在初始化项目时勾选了eslint校验之后,升级vue 2.7版本后,eslint-plugin-vue这个插件需要升级到9+版本,我目前使用的版本是:"eslint-plugin-vue": "^9.4.0"具体的一些可以参考官方提供的2.7升级指南:2.7日志官方居然把这个写在了变更日志里面,按道理最好官方的文档上也有一份说明的,但是目前没有。虽然eslint的依赖更新到新版后确实解决了一些项目启动报错的问题,但是有时候我们的SFC单文件组件开发的时候,template中的一些变量绑定还是会出现波浪线警告,这...
正确使用vue3的ts类型声明
前言使用了ts最头疼的是什么,除了类型声明应该没有第二家了,那么在vue3中如何正确的声明ts类型,代表着我们踏出了认识vue3的第一步,这非常重要,所以为此水个文章,分享给有需要的人。Volar 插件一开始我对于Volar并没有太大的需要,因为一直使用的Vetur,而且这个插件刚出来时并不完善,各种视频up讲的那个一键分屏功能其实也并不好用,虽然是个很有意思的东西,但是没有那种非要使用它的点,所以当时的我怀着这么一个疑问?为什么要用Volar ?现在我就通过两张图告诉你,它有多香!我们在template里面写代码,绑定变量最烦的是什么,就是我们写了个对象,但是忘了它的属性有哪些啊,使用...

关于给css自动添加浏览器前缀
前言为了兼容之前的旧浏览器版本,特别是安卓4.4这种低版本,transform是一定得增加浏览器前缀的,但是我在项目中遇到了设置无效的问题,极度蛋疼,下面是我的解决教程,当然没这个问题,看这篇文章,相信你对如果给项目增加浏览器前缀,会有很充分的认识。教程给css增加浏览器前缀,业界的做法就是使用postcss,目前webpack与vue cli他们需要安装的依赖略有不同:webpack:pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...
vuex 动态注册和卸载模块
概述一般情况下,我们的vuex数据都是静态的,store在首次初始化后数据的格式就定好了,在日常使用中也确实应该这么做。但是,随着业务的发展,vuex可能会变得非常的大,或者在多页面打包的时候,每个页面都需要vuex,但是如果把每个页面的vuex都写在一起,你会发现,原来我a页面可能只需要30个vuex的数据监听,但是会多出来其他页面的数据,这显然不应该的。所以,我们需要一个能够动态加载模块的方法,每个页面动态加载自己的vuex数据使用。api了解vuex官方提供了几个api:registerModule动态注册模块apiunregisterModule卸载一个动态模块hasModule...
vue-i18n 的使用方式
安装vue2版需要安装8.x版本的,9.x的是vue3版本使用上大同小异。vue2安装:yarn add vue-i18n@8vue3安装:yarn add vue-i18n封装官方虽然支持很不错的用法,但是自定义处理是难免的。vue3文件目录结构├─ src │ ├─ language │ │ ├─ lang │ │ │ ├─ en.json │ │ │ └─ zh.json │ │ ├─ core │ │ │ ├─ i18n.ts │ │ │ ├─ customization.ts │ │ │ └─ language.ts │ │ ├─ i...
vue router 一个重定向页面的思路
当项目需要和其他项目进行沟通的时候,往往常见的做法就是,我在a网站点击一个按钮,在链接中携带query参数啥的,然后去访问b网站页面。此时可能会有两种情况:跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板,跳板会对参数做一些操作,然后进行重定向。两种做法都各有优势:第一种省事简单,但是如果以后b网站链接层级发生变化,那么就会导致链接不可能,到时候还需要进行修改,很痛苦。第二种的话,我们需要写一个跳板页面,但是通过一些参数要求,甚至自身加上一些逻辑处理,那么他的功能性会更强一些。那么,在vue中,做一个重定向页面,怎么做?思路思路1利用路由守卫,当链接上存在某个参数的时候,...
vue 过滤器 驼峰与短横线相互转换的方法
自己去注册吧,提供的是es6导出的方法//短横线转驼峰 export const dashToHump = function (value) { const textArr = value.split("-"); return textArr.map((item, index) => { if (index === 0) return item.toLowerCase(); return item.slice(0, 1).toUpperCase() + item.slice(1); }) .join("")...
使用vue.draggable拖拽组件遇到的一些问题
资源github:vue.draggable中文文档:vue.draggable中文文档api参考文档:sortablejsvue.draggable是基于sortablejs的vue封装,所有有些api官方并不会有过多的解释,可以去sortablejs查看下拖拽无法触发页面滚动当拖拽的内容大于页面宽高时,页面滚动就是一个必然的需求,但是vue.draggable默认情况并不能触发滚动。官方设置里有一个属性:scroll,如果为true时就能触发滚动,但是默认属性就是true;所以这个配置可以说是无效的。解决方案:cannot set scrollSensitivity19年的时候就有提...

关于 element table多选里面实现单选的偷懒做法
在elment的table多选中增加单选逻辑,这个也不能说产品的问题,单选和多选应该算是比较基础的应用,但是,element并没有对单选做支持。于是我有了一个偷懒思路!前提由于table的一键全选按钮无法进行细致化操作,无法控制点击时选中的数量,只能在选中后的回调里面处理,所以,我的做法是单选时隐藏这个按钮。 selectable方法可以返回布尔值来表示当前格子是否允许勾选或者取消,其实就是禁用的意思。<el-table-column type="selection" :selectable="onSelectable"></el...
