Vue中的路由 Router

Vue中的路由 Router

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

单页应用SPA

所谓单页应用,指的是在一个页面上集成多种功能,甚至整个系统就只有一个页面,所有的业务功能都是它的子模块,通过特定的方式挂接到主界面上。它是AJAX技术的进一步升华,把AJAX的无刷新机制发挥到极致,因此能造就与桌面程序媲美的流畅用户体

单页应用SPA 实现

页面切换:浏览器地址栏哈希值控制隐藏显示div

页面加载:通过ajax动态获取

路由视图结构

存放页面

切换路由

路由配置

{
    path: '/about',  // 路由连接地址 和router-link to值对应
    name: 'Home', // 路由的名称 
    component: Home 
    // 路由页面使用的组件被填充的router-view里面的组件              
},

路由参数配置

  1. 动态路径参数

    // 配置
    {
    path:“/produce/:id”
    name:"produce"
    component:Produce
    }
    // 跳转链接
    Go
    /*
    :id就是给路由配置的参数
    当匹配到一个路由时,参数值会被设置到 this.route.params.id获取参数
    */

  2. 查询字符串参数

    Go

router和route区别

  1. $route
    • Object类型对象
    • 内部有params 第一种路由传参 /detail/:id /detail/101 this.$route.params.id
    • query 路由传参 第二种 ?redirect=carts this.$route.query.redirect
    • path 路由路径
    • meta 路由携带数据 { meta:{ auth:true,name:aiva } }
  2. $router 一个VUE的路由对象
    • this.$router.push(“目标路由”)
    • this.$router.go(-1) 回退

路由导航

  • router.push
    push方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL
    该方法的参数可以是一个字符串路径,或者一个描述地址的对象

    // 字符串
    router.push('home')

    // 对象
    router.push({ path: 'home' })

    // 命名的路由
    router.push({ name: 'user', params: { userId: '123' }})

    // 带查询参数,变成 /register?plan=private
    router.push({ path: 'register', query: { plan: 'private' }})

  • router.replace
    router.replace跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。

    this.$router.replace("home")

  • router.go
    这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)。

      this.$router.go(1)  // 前进1步
      this.$router.go(-1) // 后退1步
    

跳转

首页 
Home 

产品123

重定向

{ path: '/home', redirect: '/' }

别名

    { path: '/a', component: A, alias: '/b' }

404

{path: '*'// 会匹配所有路径}

路由高亮

.router-link-active

全局配置 默认的激活的 class

.router-link-exact-active

全局配置当链接被精确匹配的时候应该激活的 class

路由嵌套

路由可以嵌套,一个被渲染路由组件同样可以包含自己的嵌套

  • 要在嵌套的出口中渲染组件,需要在 VueRouter 的参数中使用 children 配置

    const router = new VueRouter({
    routes: [
    { path: '/user/:id', component: User,
    children: [
    {
    // 当 /user/:id/profile 匹配成功,
    // UserProfile 会被渲染在 User 的
    path: 'profile',
    component: UserProfile
    },
    {
    // 当 /user/:id/posts 匹配成功
    // UserPosts 会被渲染在 User 的
    path: 'posts',
    component: UserPosts
    }
    ]
    }
    ]
    })

要注意,以 / 开头的嵌套路径会被当作根路径。嵌套的路由不需要使用'/'

路由权限控制

beforeEach() 全局前置守卫 进入前调用

afterEach() 全局后置钩子 进入后调用

每个守卫 三个参数:

  • to: Route: 即将要进入的目标 路由对象
  • from: Route: 当前导航正要离开的路由
  • next: 一定要调用该方法来路由才会切换。
  • next() 直接进入下个路由
  • next(false) 路由回到from页面
  • next('/') 路由跳转到首页

路由元信息

给路由配置额外的信息

{ path:"/cart",
    ...    
    meta:{requireAuth:true}
}
// $route.meta.requireAuth 获取

组件内部守卫

  • beforeRouteEnter 进入前 (没有this)

  • beforeRouteUpdate 参数更新是

  • beforeRouteLeave 路由离开前

    const Foo = {
    template: ...,
    beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不!能!获取组件实例 this
    // 因为当守卫执行前,组件实例还没被创建
    },
    beforeRouteUpdate (to, from, next) {
    // 在当前路由改变,但是该组件被复用时调用
    // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
    // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 this
    },
    beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 this
    }
    }

路由过渡


  

组件缓存


  

  

路由懒加载

component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

你可能感兴趣的:(Vue中的路由 Router)