【vue】vouter

vue-router

• 创建路由需要映射的组件（打算显示的页面）

• 通过createRouter创建路由对象，并且传入routes和history模式

• 使用app注册路由对象（use方法）

• 路由使用: 通过<router-link>和<router-view>

如何可以让路径默认跳到到首页, 并且<router-view>渲染首页组件呢

path配置的是根路径: /，然后redirect重定向,

路由的其他属性

◼ name属性：路由记录独一无二的名称；

◼ meta属性：自定义的数据

---

router-link

◼ to属性：

 是一个字符串，或者是一个对象

◼ replace属性：

设置 replace 属性的话，当点击时，会调用 router.replace()，而不是 router.push()；

浏览器的历史记录有两种写入方式：分别为 push 和 raplace， push 是追加历史记录，replace是替换当前记录。路由跳转时候默认为 push 模式

◼ active-class属性：

 设置激活a元素后应用的class，默认是router-link-active

◼ exact-active-class属性：

 链接精准激活时，应用于渲染的 <a> 的 class，默认是router-link-exact-active；

路径参数又称动态路由传参

• 在template中，直接通过 $route.params获取值

• 在created中，通过 this.$route.params获取值

• 在setup中，我们要使用 vue-router库给我们提供的一个hook useRoute；该Hook会返回一个Route对象，对象中保存着当前路由相关的值

route和$router的区别

• router为VueRouter实例

• route为当前router跳转对象里面可以获取name、path、query、params等

---

vue-router路由跳转的方式（传参）

vue-router传递参数有两个大类：①编程式的导航 router.push。 ②声明式的导航 <router-link>

• router.push之动态路由传参

//在路由配置文件中-配置动态路由
{
path: '/home/:id',
name: 'Home',
component: Home
}
//跳转时
let id = 1;
router.push('/home/' + id)
//跳转后参数接收：
route.params.id

• router.push之query属性传参

//在路由配置文件中-配置
{
path: '/home',
name: 'Home',
component: Home
}
//页面跳转时
router.push({
  path: '/home',
  query: {
  name: '苹果'，
  id: 1,
 }
})
//页面跳转后参数接收：
route.query

• router.push之params传参

需要在路由中定义name属性然后再利用name属性跳转

//路由配置文件中-配置
{
path: '/home',
name: 'Home',
component: Home
}
//跳转时页面
router.push({
  name: 'Home', //定义name属性
  params: {
  name: '苹果'，
  id: 1,
 }
})
//页面跳转后获取参数对象接收：
route.params

• router-link之动态路由传参

 <router-link :to="'/user/'+userid" tag="button">用户</router-link>

• router-link之query属性传参

<router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>

• router-link之params属性传参

<router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>

Vue Router 的query和params的区别：

• query相当于get请求，页面跳转的时候可以在地址栏看到请求参数；params相当于post请求，参数不会在地址栏中显示

• query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传，刷新之后还在；params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

页面的前进后退

---

全局路由导航守卫(beforeEach)

全局的前置守卫beforeEach是在导航触发时会被回调的

它有两个参数：

•  to：即将进入的路由Route对象；

•  from：即将离开的路由Route对象

它有返回值：

•  false：取消当前导航；

•  不返回或者undefined：进行默认导航

• 返回一个路由地址

登录守卫功能

独享路由守卫(beforeEnter)

独享路由守卫，顾名思义就是这个路由自己的守卫任务

children: [{
          name: 'xinwen',
          // 二级路由不加斜杠
          path: 'news',
          component: News,
          meta: {
            // 是否授权
            isAuth: true,
            title: '新闻'
          },
          beforeEnter: (to, from, next) => {
            //  判断是否需要鉴定一下权限
            if (to.meta.isAuth) {
              if (localStorage.getItem('school') === 'atguigu') {
                next()
              } else {
                alert('学校名不对，无权限查看')
              }
            } else {
              next()
            }
          }
        }]

组件内路由守卫( beforeRouteEnter与 beforeRouteLeave )

<script>
  export default {
    name:'News',
    data() {
      return {
      }
    },
    //进入该组件进行拦截
    beforeRouteEnter(to,from,next){
      if(to.meta.isAuth){
        if(localStorage.getItem("username") === "yaomm"){
          next()
        }else{
          next("/login")
        }
      }else{
        next()
      }
    },
    //离开news页面时执行
    beforeRouteLeave(to, from, next){
      console.log("守卫完成",to)
      //如果没有next()无法离开news页面
      next()
    }
  }
</script>

NotFound

对于哪些没有匹配到的路由，我们通常会匹配到固定的某个页面；比如NotFound的错误页面中，这个时候我们可编写一个动态路由用于匹配所有的页面，一般我们把404路由定义在最后

我们可以通过 $route.params.pathMatch获取到传入的参数

动态添加路由

某些情况下我们可能需要动态的来添加路由，比如根据用户不同的权限，注册不同的路由

如果我们是为route添加一个children子路由，那么可以传入对应的name(父路由的name)

滚动行为(scrollBehavior)

scrollBehavior(to, from, savedPosition)：定义了一个函数，用于返回路由切换时页面滚动的位置。

• <templete>中

<router-link :to="{path:'/home',hash:'#nav'}">

• router.js

 scrollBehavior(to, from, savedPosition) {
    consloe.log(to.hash) //打印为#nav
 }

  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { left: 0, top: 0 }
    }
  }
//按浏览器前进后退键每次滚到之前的savedPosition中，如果直接点按钮，
//就会滚到定义好的x: 0, y: 0位置

  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      const position = {}
      position.selector = to.hash
      return position
    }
  }
//直接点按钮，就会滚到导航栏底下，类似锚点 导航栏置顶，，可以看下图：

  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      const position = {}
      position.selector = to.hash
      if(to.hash === '#nav'){
         postions.offset = {top:800}   
      }
      return position
    }
  }
//针对顶部的粘性导航栏,可以看下图：

路由元信息(meta)

能将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到

const routes = [
  {
    path: '/posts',
    component: PostsLayout,
    children: [
      {
        path: 'new',
        component: PostsNew,
        // 只有经过身份验证的用户才能创建帖子
        meta: { requiresAuth: true }
      },
      {
        path: ':id',
        component: PostsDetail
        // 任何人都可以阅读文章
        meta: { requiresAuth: false }
      }
    ]
  }
]