Vue官方的路由管理器Vue-router

码农NoError

于 2024-07-28 12:38:09 发布

阅读量641

点赞数 2

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/zhangzhaoyuxunlei/article/details/105074838

版权

Vue.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、 Vue-router的构成

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

<router-link> 是一个组件，该组件用于渲染一个导航链接，切换不同 HTML 内容。to 属性为目标地址，即要显示的内容。

<router-view>用于渲染路由匹配之后的显示对应内容

二、 Vue-router的基本使用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>VUE</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>

    <div id="app">
      <ul>
            <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <li><router-link to="/">首页</router-link></li>
        <li><router-link to="/documents">文档</router-link></li>
        <li><router-link to="/download">下载</router-link></li>
      </ul>

        <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>

    <script type="text/javascript">
      // 1创建 router 实例，然后传 `routes` 配置
      const router = new VueRouter({
        routes:[
          {
            // 2每个路由应该映射一个组件。其中"component" 可以是
            path:"/",
            component:{
              template:`
              <div>这里是首页</div>
              `
            }
          },
          {
            path:"/documents",
            component:{
              template:`
              <div>这里是文档页</div>
              `
            }
          },
          {
            path:"/download",
            component:{
              template:`
              <div>这里是下载页</div>
              `
            }
          }
        ]
      })

      const vm = new Vue({
        el:"#app",
        data:{

        },
        // 3通过 router 配置参数注入路由，
        router:router
      })
</script>
  </body>
</html>

三、this.$router 与 this.$route

this.$router 为VUE实例的属性，类似this.$data、this.$methods

拥有push、replace、go等常用方法

this.$route 代表的是当前路由

拥有name、meta、path、hash、query、params、fullPath等常用属性

四、当前激活路由

router-link 默认会渲染出a标签

当前激活的a标签会自动添加以下两个类名

router-link-exact-active 精确匹配规则

router-link-active 匹配规则

常用激活路由的样式控制

<style type="text/css">
  .router-link-exact-active{
    color: red;
  }
</style>

五、路由带参

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。

定义带参路由

{
  path:"/goods/:id",
  component:{
    template:`
    <div>当前商品为：{{$route.params.id}}</div>
    `
  }
}

展示带参路由

<div>
  <div>这里是首页</div>
  <ul>
    <li v-for="i in 9">  <router-link :to="'/goods/'+i">商品{{i}}</router-link> </li>
  </ul>
</div>

六、路由嵌套

在路由/user 中包含子路由 /user/login与/user/regist两个子路由

 {
            // 定义用户路由 在组件中显示可以切换到登录注册的链接  并且需要定义用于显示子路由的router-view
            path:"/user",
            component:{
              template:`
              <div>
                <div>当前为用户页面</div>
                <ul>
                  <li><router-link to="/user/login">登录</router-link></li>
                  <li><router-link to="/user/regist">注册</router-link></li>  
                </ul>
                <router-view></router-view>
              </div>
              `              
            },
            children:[
              {
                // 定义子路由时path 不能以/开头
                path:"login",
                component:{
                  template:`
                  <div>
                  登录组件
                  </div>
                  `
                }
              },
              {
                path:"regist",
                component:{
                  template:`
                  <div>
                  注册组件
                  </div>
                  `
                }
              }
            ]
          }

七、路由重定向

对六中定义的子路由，如果想在进入时显示登录组件可以使用重定向，即在进入/user时进入/user/login

即在定义路由时使用redirect重定向

{
    path:"/user",
    redirect:"/user/login",
    ...
}

八、路由命名

在定义路由时使用name属性给路由名字

{
  // 定义子路由时path 不能以/开头
  path:"login",
  name:"login",
  ...
},
{
  path:"regist",
  name:"regist",
  ...
}

路由跳转时不需要写入绝对路径，只需要写入名字即可

//绝对路径写法
<li><router-link to="/user/login">登录</router-link></li>
<li><router-link to="/user/regist">注册</router-link></li>  
//使用路由名字写法
  <li><router-link :to="{name:'login'}">登录</router-link></li>
  <li><router-link :to="{name:'regist'}">注册</router-link></li>

九、路由守卫

路由守卫可以分为全局路由守卫与独享路由守卫

全局路由守卫

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

独享路由守卫

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

to: Route: 即将要进入的目标路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

使用路由守卫验证权限案例

在需要授权的路由中添加meta属性

{
    path:"/download",
    meta:{
      auth:true
    },
    component:{
      template:`
      <div>这里是下载页</div>
      `
    }
  },

在守卫中进行判断处理

router.beforeEach(function(t,f,n){
  if(t.meta.auth){
    let logined = false
    if(logined){
      n()
    } 
    else
    {
      n("/user/login?next="+t.path)
    }
  }
  else
  {
    n()
  }
  
})

更多的钩子函数可以查看官方文档

十、滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
      if (savedPosition) {
        return savedPosition
      } else {
        return { x: 0, y: 0 }
      }
  }
})

码农NoError

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue官方的路由管理器Vue-router

一、 Vue-router的构成Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。<router-link> 是一个组件，该组件用于渲染一个导航链接，切换不同 HTML 内容。to 属性为目标地址，即要显示的内容。<router-view>用于渲染路由匹配之后的显示对应内容二、 Vu...
复制链接

扫一扫