vue-router 知识点

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 对象，它表示当前窗口的浏览历史。不支持老旧浏览器。