vue路由

最新推荐文章于 2024-07-05 15:05:21 发布

键盘上的那抹灰

最新推荐文章于 2024-07-05 15:05:21 发布

阅读量253

点赞数

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

本文链接：https://blog.csdn.net/qq_42453562/article/details/112851080

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue Router的安装、配置与多种使用方式，包括动态路由、路由传值、编程式导航、路由嵌套及路由模块化。通过实例展示了如何在Vue项目中实现动态参数传递、GET方式传递数据、以及如何进行编程式的页面跳转。同时，还探讨了路由的嵌套结构和模块化管理，帮助开发者更好地理解和运用Vue Router。

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

vue路由

1：安装

npm install vue-router

在这里插入图片描述

2：引用（main.js）

/*1: 引入vueRouter官方插件（路由），并使用*/
import VueRouter from 'vue-router'
Vue.use(VueRouter)
/*2: 定义路由 */
/*3: 实例化VueRouter */
var router = new VueRouter({
  routes: [{
      path: '*',
      redirect: '/mine' // 当没有写跳转页面时，默认跳转路由
    },
    {
      path: '/mine',
      component: Mine
    },
    {
      path: '/home',
      component: Home
    }
  ]
})
/*4: 挂载  new Vue({ router  })*/
/*5: 配置 根组件<router-view></router-view> */

在这里插入图片描述

3：方式

（1）动态路由+路由传值

在这里插入图片描述
1：配置路径参数，以冒号开头 path: '/news/:aid',
2：页面A发送数据 <router-link :to="'/news/'+item">
页面B接收数据 this.$route.params

（2）路由+get传值

在这里插入图片描述
1：配置路径参数 path: '/content',
2：页面A发送数据 <router-link :to="'/content?item=' + item">
页面B接收数据 this.$route.query

（3）编程式路由导航

在这里插入图片描述

<button @click="goNews()">跳转新闻</button>

 {
      path: '/home',
      component: Home,
      name:"home"//命名路由（编程式路由使用）
    },

	  // 1-- 字符串路由
      // this.$router.push('home');
      // 2--对象路由
      this.$router.push({ path: "/home" }); //注意这个路径的写法和main.js一致 动态路由也是（帶值）
      // 3--命名路由（需要在main.js的路由位置配置名字name ）
      // this.$router.push({name:'home', params:{us erId: '123'}});
       
      // this.$router.push({path:'home', query:{plan:private}});// /register?plan=private
      // this.$router.back();//后退一步
      // this.$router.forward();//前进一步
      // this.$router.go(0)正前 负退 0刷新