Vue—— vue中的路由

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

一、Vue中的路由

　　vue-router 是 vue 中提供的路由，

1.使用vue-router 的步骤：

（1）导入 vue 文件和 vue-router 文件

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

（2）创建路由实例并配置路由规则

// 路由实例
const router=new VueRouter({
  // 路由规则
  routes:[]
})

（3）将路由实例挂载到vue 实例上

const vm=new VTTCue({
  el:'#app',
  data:{},
  router:router
})

（4）创建路由导航

（5）创建路由占位符

<div id='app'>
  <!-- 路由链接 -->
  <router-link to="组件路径"></router-link>
  <router-link to="组件路径"></router-link>
  <!-- 路由占位符 -->
  <router-view></router-view>
</div>

二、路由的模式

　　vue 中路由的模式有两种：hash模式，history模式，可以在路由配置文件中通过 mode 字段来指定当前使用的路由模式。默认是hash 模式。

　　history 模式容易发生一个问题，如果是页面刷新的时候容易发生404错误。

　　详细可以看（https://www.cnblogs.com/zhilili/p/14721911.html）

三、路由中的参数传递

　　vue-router 中的路由跳转和参数传递主要有三种：

（1）通过动态路由方式

// 配置路由规则
const routes=[
  {
    path:'/detail/:id',
    name:"Detail",
    component:Datail
  }
];
// 路由跳转页面时候
var id=1;
this.$router.push('/detail/'+id)
// 获取路由传递的参数
this.$route.params.id

　　页面刷新参数不会消失

　　可以在路由中设置多段参数，如下

模式匹配的路径$route.params
/user/:username/user/even{username:'evan'}
/user/:username/post/:post_id/user/even/post/123{username:'even',post_id:'123'}

（2）通过query 属性传值

// 配置路由规则
const routes=[
  {
    path:'/detail',
    name:"Detail",
    component:Datail
  }
];
// 路由跳转页面时候
this.$router.push({
  path:'/detail',
  query:{
    name:'张三',
    id:1
  }
})
// 获取路由传递的参数
this.$route.query.id
this.$route.query.name

　　页面刷新参数不会消失

（3）通过params 属性传值

// 配置路由规则
const routes=[
  {
    path:'/detail',
    name:"Detail",
    component:Datail
  }
];
// 路由跳转页面时候
this.$router.push({
  name:'Detail',
  params:{
    name:'张三',
    id:1
  }
})
// 获取路由传递的参数
this.$route.params.id
this.$route.params.name

　　页面刷新参数会消失。

四、动态路由

　　我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

const User = {
  template: '<div>User</div>'
}
const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

　　像/user/foo 和 /user/bar 都将映射到相同的组件里面。

　　一个路由参数使用冒号“：”，当匹配一个路由的时候，它后面的参数就会被匹配到 this.$route.params 里面，我们可以通过它来获取里面指定的参数。

动态路由参数的变化：

　　注意：如果是使用路由参数的时候，例如从 /user/foo 到/user/bar  的时候，原来的组件实例会被复用，因为他们两个路径对应的都是同一个路由组件，比起组件销毁重建，复用更有效率，这就意味着user 组件的生命周期钩子将不会被调用，如果想要获取到变化的路由参数，可以使用watch监听属性来监听路由的变化，或者使用新增的组件内的路由钩子函数来获取变化的路由参数。

（1）使用watch监听属性来监听路由的变化：

const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    }
  }
}

（2）或者使用2.2中新增的路由导航钩子

const User = {
  template: '...',
  beforeRouteUpdate(to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

五：路由中的生命周期钩子

路由的导航守卫分为三种：全局路由导航守卫，单个路由导航守卫，组件内的导航守卫。

（1）全局路由导航守卫

　* 前置路由导航守卫router.beforeEach()：

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

　　每个守卫接受三个参数：

　　　　to:是一个route对象，即将要进入的目标路由对象。

　　　　form:也是一个route对象，表示当前正要离开的路由。

　　　　next:是一个函数，一定要调用该方法来resolve 这个钩子。

　　确保 next 函数在任何给的的导航说守卫中都被严格调用一次，他可以出现多余一次，但是只能在所有的逻辑路由都不重叠的情况下，否则钩子都不会被解析或者报错，如下;

// BAD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  // 如果用户未能验证身份，则 `next` 会被调用两次
  next()
})
// GOOD
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

　* 后置路由导航守卫router.afterEach((ro,from)=>{})

（2）单个路由导航守卫:

　可以直接在路由配置上直接定义 beforeEnter 守卫：

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

（3）组件内的导航守卫：

　　* beforeRouteEnter:

　　* beforeRouteUpdate(2.2新增）

　　* 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`
  }
}

　　beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没有被创建。

　　不过，可以通过传递一个回调给next 来访问组件实例，在导航被确认的时候执行回调函数，并把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。

完整的导航解析流程：

- 导航被触发。

- 在失活的组件中调用 beforeRouteLeave 守卫

- 调用全局的 beforeEach 守卫。

- 在重复的组件中调用 beforeRouteUpdate 守卫

- 在路由配置中调用 beforeEnter.

- 解析异步路由组件

- 在被激活的组件里面调用 beforeRouteEnter

- 调用全部的 beforeResolve 守卫

- 导航被确认

- 调用全局的afterEach 钩子

- 触发 DOM 更新

- 调用 beforeRouteEnter 守卫传递给 next 的回调函数，创建好的组件实例会在 next 的回调函数里面被调用。

以上是 Vue—— vue中的路由 的全部内容， 来源链接： utcz.com/z/377425.html

回到顶部