vue-router是什么?
vue Router 是Vue.js官方的路由管理器,让构建单页面变的易如反掌.
路由是什么?
路由就是可以理解为指向,就是我在页面上点击一个按钮需要跳转到对应的页面
vue Router 三个单词的意思(route, routes, router)
route: 首先它是一个单数,译为路由,我们可以理解为单个路由或者某个路由
route 就是一个路由或某个路由
routes: 它是一个复数,表示多个集合才能为复数,我们可以理解为多个路由的集合,
js中表示多种不同状态的集合的形式只有数组合对象
routes 因为是复数形式,所以是多个路由组成的集合
router: 译路由器,上面都是路由,这个是路由器,我们可以理解为一个路由器,我们
可以理解为一个容器包含上述两个或者说它是个管理者
router 路由器,当用户在页面上点击按钮的时候,这个时候router就会去找routes
中去查找route,就是路由器会去路由集合中找对应的路由
代码演示:
router.js
//引入vue
import Vue from 'vue';
//引入vue-router
import VueRouter from 'vue-router';
//第三方库需要use一下才能用
Vue.use(VueRouter)
//引用page1页面
import page1 from './page1.vue';
//引用page2页面
import page2 from './page2.vue';
//定义routes路由的集合,数组类型
const routes=[
//单个路由均为对象类型,path代表的是路径,component代表组件
{path:'/page1',component:page1},
{path:"/page2",component:page2}
]
//实例化VueRouter并将routes添加进去
const router=new VueRouter({
//ES6简写,等于routes:routes
routes
});
//抛出这个这个实例对象方便外部读取以及访问
export default router
main.js
import Vue from 'vue'
import App from './App'
//引用router.js
import router from './router.js'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
//一定要注入到vue的实例对象上
router,
components: { App },
template: '<App/>'
})
App.vue
//router-link定义页面中点击触发部分
<router-link to="/page1">Page1</router-link>
<router-link to="/page2">Page2</router-link>
router-link
router-link 定义页面中点击触发部分,也就是点击跳转连接
router-view
router-view 根据声明式导航,也就是router-link 这里面的配置来显示对应组件中的地址页面
补充:给组件加name属性是为什么
给vue面板用的,便于观看和查找,默认显示index组件名
路由传参
传参有两种:
一种是在router-link地址的后面问号传 ‘./friend?id=99’
如何拿到参数?
$route是vue-router提供的全局响应式对象,这个对象不用声明直接使用
this.$route.query.id 这样就可以拿到对应的参数了
一种是在配置的路由地址后面通过冒号传参’./friend/:sid’
如何拿到参数?
this.$route.params.sid 这样就可以拿到传入的参数了
路由守卫
路由嵌套
配置子路由:children在main里配置,谁里面要嵌套 谁配置
children中以数组的形式可配置多个子路由,以{}隔开,从二级路由开始path不带’/’
{
path:"/page2",
component:page2,
children:[{
path:'路径',
component:组件名
}]
}
子组件里面写一个router-view即可
子组件的router-link要写上完整路径(爸爸的加自己的)
<router-link to='/爸爸路径/子组件路径' > 链接的名字 <router-link>
两个类名的区别
在点击激活是有两个类名,可以利用这两个类名给当前连接加样式
一个是router-link-exact-active(精准匹配url中的hash值),另一个是router-link-active(模糊匹配url中的hash值)
这两个是标签中自带的样式类名
什么是嵌套路由重定向
因为默认跳转的是’/'这个路径所以说要给它设置个默认展示
{
path:'/',
redirect:'想要展示的路径'
}
如果想让二级路由默认展示将默认展示的path:’'设置为空即可,因为父路径加上空字符串还会展示父路径
也可以在redirect中写上爸爸的路径加上儿子的路径
{
path:'爸爸的路径',
redirect:'爸爸的路径加上儿子的路径'
}
路由有哪几种模式有什么区别
vue路由配置中有一个mode选项,可以设置哈希模式和history模式
哈希模式
①可以通过window.location.hash来改变当前页面的hash值。
②通过hash改变了url,会触发hashchange事件,只要监听hashchange事件,就能捕获到通过hash改变url的行为.
③有了监听事件,且改变hash页面不刷新,这样我们就可以在监听事件的回调函数中,执行我们展示和隐藏不同UI显示的功能,从而实现前端路由。
④路径带有#号、hash值不包括在Http请求中,它是交由前端路由处理,所以改变hash值时不会刷新页面,也不会向服务器发送请求、hash发生变化的url都会被浏览器记录下来,从而你会发现浏览器的前进后退都可以用了
history模式
①整个地址重新加载,可以保存历史记录,方便前进后退
②依赖H5 API和后台配置,没有后台配置的话,页面刷新时会出现404。
③window.history属性指向 History 对象,它表示当前窗口的浏览历史。不支持老旧浏览器。