前端路由 (vue.router)
首先要了解一下
HTML5中想要不刷新网页,更换页面内容有两种模式
hash模式 和 history模式
hash模式时,url跳转时后面会有一个#号,然后不太美观,所以我们通常选择history
location.hash = url (压入栈堆----->后进先出)
history.pushState(data,title,url) (压入栈堆----->后进先出)
history.replaceState(data,title,url) 不压入栈堆,替换url
history.back() ==history.go(-1) 后退一下网页
history.forward() ==history.go(1) 前进一个网页
history.go(2) 前进两个网页
history.go(-2) 后退两个网页
Vue.use(VueRouter) 使用VueRouter插件,在这之前要导入这个插件
new VueRouter({}) 创建一个VueRouter对象实例
里面有一些常用属性:
mode:绑定是hash或者history两种模式
routes:映射列表(值为一个对象数组)
routes映射列表
{
path:'/user/:userId', //添加事需要在user后加 /:userId
name:"User", //名字
component: User //挂载的组件
}
如果想要配置一个显示的默认路径.我们可以在routes中添加一个映射
{
path: '/',
redirect: '/home'
}
当url中的hash为空的时候，就是刚进来这个网址，为空，就把url定义为redirect所指定的路径. (redirect重定向)
配置好组件,我们就该学习如何去使用组件:
组件<router-link>
<router-link to='/home' tag=' 标签名' replace active-class='类名'>
to:用于指定跳转的路径
tag:用于指定之后渲染成什么组件,默认是一个a标签
replace:不会留下history的记录,指定了replace,后退键则不能返回上一个页面
active-class: 对应的路由匹配成功是,会自动给当前元素设置一个router-link-active的class,通过active-class可以修改默认的名称,这个也可以在router文件下的index.js中router对象实例中通过linkActiveClass:类名 进行设置
tip:1.在进行亮度显示的导航菜单或者底部的tabbar时,会使用到该类
2.但是通常不会修改类的属性,会直接使用默认的router-link-active
组件<router-view>
占位 渲染某一个组件时,在这个位置进行展示
路由由代码跳转,我们则需要在Vue.app中添加单击事件,绑定事件进行跳转
关键代码,router每一个组件中都会有
this.$router.push('/home')
this,$router.push('/about')
当我们想要点击用户的时候,url想要成为一下的形式
localhost:8080/user/zhangsan
添加组件router-link to属性输入路径,默认是一个a标签
<router-link :to="'/user/'+userId">用户</router-link>
date数据: userId:"zhangsan",用户需要的动态绑定属性
想要动态,我们需要对to使用v-bind:属性名或者简写’:属性名’
routes列表中
{
path:'/user/:userId', //添加时需要在user后加 /:userId
name:"User", //名字
component: User //挂载的组件
}
$router:是创建出来的router的实例(可以改变名字) 不过是创建实例的时候改
$route: 当前谁活跃处于活动状态则拿到的就是谁
两者不一样,要进行区分
在User组件中,设置一个data属性,userId:this.$route.params.userId
通过$route.params去拿userId的值,然后渲染到页面(parameters)
userId是通过routes中映射的,所以取的时候名字要一致
路由的懒加载
大概意思就是需要你的时候,你再加载,可以减少用户的白屏时间懒加载写法
()=>import('../views/Home.vue') 箭头函数返回加载的内容
举个例子:建议写法
const Home = ()=>import('../views/Home.vue')
const About = ()=>import('../views/About.vue')
const User = ()=>import('../views/User.vue')
变量都在一个地方,便于集中管理,然后分别添加到需要绑定组件的地方
组件套用
当我们想在父组件下面套用组件的话我们需要有子组件,然后再父组件使用.方法如下
在routes映射表中,找到需要套用子组件的父组件,在其内部添加一个children属性,属性的值为一个对象,里面依然有path,name,compont属性,依次类推
在父组件中定义绑定routes映射表 在父组件中定义不用加/直接加要展示的路径
在父组件中使用子组件,主义router-link to="url" url需要加上父组件的/about
运行结果如下:
