Vue路由总结

最新推荐文章于 2022-10-16 14:06:27 发布

Chen_leilei

最新推荐文章于 2022-10-16 14:06:27 发布

阅读量248

点赞数

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

本文链接：https://blog.csdn.net/Chen_leilei/article/details/122273082

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js路由的配置和使用，包括一级路由设置、动态路由、参数传递、路由高亮、二级路由、重定向、history模式以及路由守卫的实现。通过实例展示了如何在项目中进行页面跳转、状态管理以及路由保护，帮助开发者更好地理解和掌握Vue.js的路由功能。

摘要由CSDN通过智能技术生成

1.一级路由配置

（1）引入路由

import Vue from 'vue'
import Router from 'vue-router'

（2）注册路由

// 注册路由插件
Vue.use(Router)

(3)Vue引入路由在main.js中

new Vue({
  router: router,
  // store,
  render: h => h(App)
}).$mount('#box')

（4）使用路由

export default new Router({
    {
      path: '/cinema',
      component: Cinema
    }, {
      path: '/center',
      component: Center
    },
})

（5）在.vue中留好容器的位置有跳转就需要有容器

 <!--路由容器 -->
    <router-view></router-view>

（6）路由声明式导航高亮显示

 <router-link to="/film" tag="li" activeClass="myactive">正在热映</router-link>


<style lang="scss" scoped>
    .myactive{
color:red
}
</style>

(7)二级路由

在router.js中path像下面这么写，表示/film路径下有二级路由 nowplaying,comingsoon

 {
      path: '/film',
      component: Film,
      children: [
        {
          path: 'nowplaying',
          component: Nowplaying
        }, {
          path: 'comingsoon',
          component: Comingsoon
        }
      ]
    },

发送参数(8)重定向，当所有路径都不匹配的时候，有一个重定向的页面到 /film/nowplaying

{
      path: '/*',
      redirect: '/film/nowplaying'
    }

（9）动态路由携带参数跳转页面

 {
      path: '/detail/:myid',
      name: 'chenDetail',
      component: Detial
    }

发送参数

 // 编程式导航
      // this.$router.push(`/detail/${id}`)
      // 通过名字跳转
      this.$router.push({ name: 'chenDetail', params: { myid: id } })

接收参数

this.$route.params.myid

（10）history模式

默认Vue是hash形式，路径上有#不美观，使用history模式是在router.js中的mode下修改成history形式
模拟后台接口跳转，注意使用history模式，如果后台没有指定的路径需要返回一个默认的页面
mode: 'history'

（11）路由守卫（拦截器）

分为全局路由守卫和组件路由首位

1.全局守卫，在router.js中定义一个router.beforeEach 如果to.path的路径是center就判断一下是否需要登录，不需要登录直接next()进入center页面，否则跳转到login页面。

router.beforeEach((to, from, next) => {
  if(to.path==="/center"){
      if(auth.isLogin()){
        next()
      }else{
        next("/login")
      }
  }else{
    next()
  }
})

2.组件守卫

在需要守卫的组件中添加

<script>
export default {
   beforeRouteEnter(to, from, next){
       console.log("局部盘查")
       if(true){
           next()
       }else{
           next("/login")
       }
   }
}
</script>