Vue 路由使用

已于 2023-12-11 16:48:32 修改
阅读量128 收藏
点赞数
分类专栏： Vue 文章标签： vue.js
于 2023-11-16 14:11:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50236973/article/details/134440647
版权

简单的路由使用

1. 安装（注意，vue2最高只能使用3版本，vue3才能使用4以及以上的版本，vue2使用4以上版本会报错）
npm i vue-router@3 // 指定3版本

2. 在src下创建router文件夹，在index.js内定义好，代码如下：

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router';
import SchoolName from '../components/SchoolName';
import StudentName from '../components/StudentName';

// 创建并暴露一个路由器
const router = new VueRouter({
    routes: [
        {
            path: '/schoolName',
            component: SchoolName
        },
        {
            path: '/studentName',
            component: StudentName
        }
    ]
});

export default router;

3. 在main.js内使用

/**
 * 该文件是整个项目的入口文件
 */
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import router from './router';
import store from './store';

// VueRouter是插件，必须写Vue.use
Vue.use(VueRouter);

// 关闭vue的生产提示
Vue.config.productionTip = false
// 创建vue实例对象
new Vue({
  // 完成了功能：将App组件放入容器中
  render: h => h(App),
  store,
  router,
  beforeCreate () {
    Vue.prototype.$bus = this;
  }
}).$mount('#app')

4. 使用完后可以去组件内体验，代码如下：

<template>
    <div>
        <!-- <SchoolName />
        <StudentName /> -->

        <!-- 路由 -->
        <!-- active-class激活时显示的高亮 -->
        <router-link active-class="active" to="/schoolName">SchoolName</router-link>
        <router-link active-class="active" to="/studentName">StudentName</router-link>

        <!-- 指定路由呈现位置 -->
        <router-view />
    </div>
</template>

<script>
    import SchoolName from './components/SchoolName';
    import StudentName from './components/StudentName';

    export default {
        name: 'App',
        data () {
            return {
                msg: '好忙'
            }
        },
        methods: {},
        components: {SchoolName, StudentName}
    }
</script>

<style>
    .active {
        color: red;
    }
</style>

嵌套路由

1. router文件夹下的index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router';
import SchoolName from '../components/SchoolName';
import StudentName from '../components/StudentName';
import Child from '../components/Child';
import Some from '../components/Some';

// 创建并暴露一个路由器
const router = new VueRouter({
    routes: [
        {
            path: '/schoolName',
            component: SchoolName,
            children: [
                {
                    path: 'child',
                    component: Child,
                },
                {
                    path: 'some',
                    component: Some,
                }
            ]
        },
        {
            path: '/studentName',
            component: StudentName
        }
    ]
});

export default router;

2. SchoolName组件内使用嵌套路由

<template>
  <div>
      路由1

      <hr />
      <router-link active-class="active" to="/schoolName/child">路由child</router-link>
      <router-link active-class="active" to="/schoolName/some">路由some</router-link>

      <router-view />
  </div>
</template>

<script>
    export default {
        name: 'SchoolName',
        data() {
            return {
                isShow: true
            }
        },
        methods: {
            handleClick() {
                this.isShow = !this.isShow
            }
        }
    }
</script>

命名路由（优点：简化路由路径）

router.js：
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router';
import SchoolName from '../components/SchoolName';
import StudentName from '../components/StudentName';
import Child from '../components/Child';
import Some from '../components/Some';

// 创建并暴露一个路由器
const router = new VueRouter({
    routes: [
        {
            path: '/schoolName',
            component: SchoolName,
            children: [
                {
                    name: 'child', // 随机取名，最好与path保持一致
                    path: 'child',
                    component: Child,
                },
                {
                    path: 'some',
                    component: Some,
                }
            ]
        },
        {
            path: '/studentName',
            component: StudentName
        }
    ]
});

export default router;

组件：
<template>
  <div>
      路由1

      <hr />
      <!-- 写法一，不推荐, 模板字符串写法 :to="`/schoolName/child?id=${id}`" -->
      <!-- <router-link active-class="active" to="/schoolName/child?id=111">路由child</router-link> -->

      <!-- 写法二，对象写法，推荐 -->
      <!-- <router-link active-class="active" to="/schoolName/child"> -->
      <router-link active-class="active" 
        :to="{
          name: 'child',
          query: {id: 111}
        }"
      >
        路由child 
      </router-link>
      <router-link active-class="active" to="/schoolName/some">路由some</router-link>

      <router-view />
  </div>
</template>

<script>
    export default {
        name: 'SchoolName',
        data() {
            return {
                isShow: true
            }
        },
        methods: {
            handleClick() {
                this.isShow = !this.isShow
            }
        }
    }
</script>

路由传参（query）

父组件路由跳转：

<template>
  <div>
      路由1

      <hr />
      <!-- 写法一，不推荐, 模板字符串写法 :to="`/schoolName/child?id=${id}`" -->
      <!-- <router-link active-class="active" to="/schoolName/child?id=111">路由child</router-link> -->

      <!-- 写法二，对象写法，推荐 -->
      <!-- <router-link active-class="active" to="/schoolName/child"> -->
      <router-link active-class="active" 
        :to="{
          path: '/schoolName/child',
          query: {id: 111}
        }"
      >
        路由child 
      </router-link>
      <router-link active-class="active" to="/schoolName/some">路由some</router-link>

      <router-view />
  </div>
</template>

<script>
    export default {
        name: 'SchoolName',
        data() {
            return {
                isShow: true
            }
        },
        methods: {
            handleClick() {
                this.isShow = !this.isShow
            }
        }
    }
</script>


子组件接收：

<template>
  <div>
      路由3
  </div>
</template>

<script>
    export default {
        name: 'Child',
        data() {
            return {
            }
        },
        mounted() {
          // 获取路由传参
          console.log(this.$route.query.id);
        }
    }
</script>

 路由传参（params）

router.js：
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router';
import SchoolName from '../components/SchoolName';
import StudentName from '../components/StudentName';
import Child from '../components/Child';
import Some from '../components/Some';

// 创建并暴露一个路由器
const router = new VueRouter({
    routes: [
        {
            path: '/schoolName',
            component: SchoolName,
            children: [
                {
                    name: 'child', // 随机取名，最好与path保持一致
                    path: 'child/:id/:title', // 使用params需要在path路由后面占位
                    component: Child,
                },
                {
                    path: 'some',
                    component: Some,
                }
            ]
        },
        {
            path: '/studentName',
            component: StudentName
        }
    ]
});

export default router;

组件：
<template>
  <div>
      路由1

      <hr />
      <!-- 写法一，路由的path必须写成: 'child/:id/:title', // 使用params需要在path路由后面占位 -->
      <!-- <router-link active-class="active" to="/schoolName/child/111/666">路由child</router-link> -->

      <!-- 写法二，对象写法，推荐，路由可以不占位也能生效，建议占位 -->
      <router-link active-class="active" 
        :to="{
          // 注意，使用对象写法必须使用name，使用path会报错
          name: 'child',
          params: {id: 111, title: 666}
        }"
      >
        路由child 
      </router-link>
      <router-link active-class="active" to="/schoolName/some">路由some</router-link>

      <router-view />
  </div>
</template>

<script>
    export default {
        name: 'SchoolName',
        data() {
            return {
                isShow: true
            }
        },
        methods: {
            handleClick() {
                this.isShow = !this.isShow
            }
        }
    }
</script>

路由的props配置

这里的案例是使用params和query传参，配置好后也用props接收
通用子组件写法：
<template>
  <div>
      路由3
      {{id}}
      {{title}}
  </div>
</template>

<script>
    export default {
        name: 'Child',
        props: ['id', 'title'], // 路由配置好布尔值后，这里使用props接收
        data() {
            return {
            }
        },
        mounted() {
          // 获取路由传参
          console.log(this.$route);
        }
    }
</script>

---------------------------------------------------------
使用params写法：

router.js
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router';
import SchoolName from '../components/SchoolName';
import StudentName from '../components/StudentName';
import Child from '../components/Child';
import Some from '../components/Some';

// 创建并暴露一个路由器
const router = new VueRouter({
    routes: [
        {
            path: '/schoolName',
            component: SchoolName,
            children: [
                {
                    name: 'child', // 随机取名，最好与path保持一致
                    path: 'child/:id/:title', // 使用params需要在path路由后面占位
                    component: Child,
                    // props的三种写法
                    // 1. 值为对象，该对象的所有key-value都会以props传给Child组件, 很少使用，因为值都是固定不变的
                    // props: {id: 11, title: 666}
                    // 2. 布尔值写法，若布尔值为真，就会把该组件收到的所有params参数，以props传给Child组件，使用params传参时使用
                    props: true
                    // 3. 值为函数, 使用query传参时使用
                    // props($router) {
                    //     return {id: $router.query.id, title: $router.query.title}
                    // }
                },
                {
                    path: 'some',
                    component: Some,
                }
            ]
        },
        {
            path: '/studentName',
            component: StudentName
        }
    ]
});

export default router;

父组件：
<template>
  <div>
      路由1

      <hr />
      <!-- 写法一，不推荐 -->
      <!-- <router-link active-class="active" to="/schoolName/child/111/666">路由child</router-link> -->

      <!-- 写法二，对象写法，推荐 -->
      <router-link active-class="active" 
        :to="{
          // 注意，使用对象写法必须使用name，使用path会报错
          name: 'child',
          params: {id: 111, title: 666}
        }"
      >
        路由child 
      </router-link>
      <router-link active-class="active" to="/schoolName/some">路由some</router-link>

      <router-view />
  </div>
</template>

<script>
    export default {
        name: 'SchoolName',
        data() {
            return {
                isShow: true
            }
        },
        methods: {
            handleClick() {
                this.isShow = !this.isShow
            }
        }
    }
</script>




-----------------------------------------------------------------------------------------
使用query写法：
router.js：
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router';
import SchoolName from '../components/SchoolName';
import StudentName from '../components/StudentName';
import Child from '../components/Child';
import Some from '../components/Some';

// 创建并暴露一个路由器
const router = new VueRouter({
    routes: [
        {
            path: '/schoolName',
            component: SchoolName,
            children: [
                {
                    name: 'child', // 随机取名，最好与path保持一致
                    path: 'child', // 使用params需要在path路由后面占位
                    component: Child,
                    // props的三种写法
                    // 1. 值为对象，该对象的所有key-value都会以props传给Child组件, 很少使用，因为值都是固定不变的
                    // props: {id: 11, title: 666}
                    // 2. 布尔值写法，若布尔值为真，就会把该组件收到的所有params参数，以props传给Child组件，使用params传参时使用
                    // props: true
                    // 3. 值为函数, 使用query传参时使用
                    props($router) {
                        return {id: $router.query.id, title: $router.query.title}
                    }
                },
                {
                    path: 'some',
                    component: Some,
                }
            ]
        },
        {
            path: '/studentName',
            component: StudentName
        }
    ]
});

export default router;

父组件：
<template>
  <div>
      路由1

      <hr />
      <!-- 写法一，不推荐 -->
      <!-- <router-link active-class="active" to="/schoolName/child/111/666">路由child</router-link> -->

      <!-- 写法二，对象写法，推荐 -->
      <router-link active-class="active" 
        :to="{
          // 注意，使用对象写法必须使用name，使用path会报错
          path: '/schoolName/child',
          query: {id: 111, title: 666}
        }"
      >
        路由child 
      </router-link>
      <router-link active-class="active" to="/schoolName/some">路由some</router-link>

      <router-view />
  </div>
</template>

<script>
    export default {
        name: 'SchoolName',
        data() {
            return {
                isShow: true
            }
        },
        methods: {
            handleClick() {
                this.isShow = !this.isShow
            }
        }
    }
</script>

router-link的replace属性

1. 控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式，分别是replace和push，push是追加历史记录，replace是替换当前记录，路由跳转的时候默认是push
3. 如何开启replace模式：<router-link replace>路由</router-link>

编程式路由导航

<template>
  <div>
    路由1

    <hr />
    <!-- 写法一，不推荐 -->
    <!-- <router-link active-class="active" to="/schoolName/child/111/666">路由child</router-link> -->

    <!-- 写法二，对象写法，推荐 -->
    <!-- <router-link active-class="active" 
        :to="{
          // 注意，使用对象写法必须使用name，使用path会报错
          name: 'child',
          params: {id: 111, title: 666}
        }"
      >
        路由child 
      </router-link> -->
    <!-- <router-link active-class="active" to="/schoolName/some">路由some</router-link> -->

    <button @click="handlePush">push跳转按钮</button>
    <button @click="handleReplace">replace跳转按钮</button>
    <button @click="handleForward">前进</button>
    <button @click="handleBack">后退</button>
    <button @click="handleGo">go</button>

    <router-view />
  </div>
</template>

<script>
export default {
  name: 'SchoolName',
  data() {
    return {
    }
  },
  mounted() {
    console.log(this.$router);
  },
  methods: {
    handlePush() {
      // router用法与to的对象用法完全一致
      this.$router.push({
        name: 'child',
        params: { id: 111, title: 666 }
      })
    },
    handleReplace() {
      // router用法与to的对象用法完全一致
      this.$router.replace({
        name: 'child',
        params: { id: 111, title: 666 }
      })
    },
    handleForward() {
      this.$router.forward()
    },
    handleBack() {
      this.$router.back()
    },
    handleGo() {
      this.$router.go(1) // 正数代表前进N个页面跳转，负数代表后退
    }
  }
}
</script>

缓存路由组件

1. 作用：让不展示的路由组件保持挂载，不被销毁
2. 具体编码：
// include表示哪些路由组件需要缓存起来，命名使用的是组件名name
// 单个写法
<keep-alive include="About">
    <router-view></router-view>
</keep-alive>

// 多个缓存写法
<keep-alive :include="['About', 'News']">
    <router-view></router-view>
</keep-alive>

两个新的生命周期（路由特有的，顺便提一下除了正常的八个生命钩子还有三个钩子，这两个加上this.$nextTick）

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态

<template>
  <div>
    路由3
    {{ id }}
    {{ title }}
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: ['id', 'title'], // 路由配置好布尔值后，这里使用props接收
  data() {
    return {
    }
  },
  activated() {
    console.log('激活');
  },
  deactivated() {
    console.log('失活');
  }
}
</script>

怕冷的火焰（~杰）
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 路由
zjy23580的博客
01-04 148
Vue 路由 SPA是什么? 单页Web应用（single page application，SPA），就是只有一个Web页面的应用， 是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序 单页面应用程序： 只有 第一次 会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中 传统多页面应用程序： 对于传统的多页面应用程...
Vue中路由的使用
凯凯凯凯凯凯凯凯
09-25 3815
Vue中路由的使用，重定向，命名视图，属性监听以及计算属性
Vue 路由使用方法详解：从基础到高级
m0_58013334的博客
08-19 2537
Vue 是一款流行的前端框架，它提供了强大的路由功能，用于构建单页应用程序（SPA）。Vue 路由能够帮助我们实现页面之间的无缝切换和导航，提升用户体验。本文将详细介绍 Vue 路由的使用方法，包括基础配置、路由参数传递、导航守卫等，帮助你充分发挥 Vue 路由的潜力。
【vue】vue中的路由vue-router，vue-cli脚手架详细使用教程_vue-cli 路由
最新发布
2401_84433807的博客
05-09 237
框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
Vue.js——vue-router 60分钟快速入门
dengjie0448的博客
07-21 1029
概述 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。 本文将以示例的形式来介绍vue-router的各个特性，一共包...
vue路由的使用
喵酱
03-26 929
vue路由的使用
Vue基础知识总结 11：前端路由vue-router
热门推荐
学Java，找哪吒
10-13 4万+
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
vue路由入门使用
01-08
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡...
vue路由的创建及基本使用
04-15
以上就是Vue Router的基础用法，包括路由的创建、动态路由与查询参数的传递、导航守卫、元信息以及动画和组件模板的使用。通过掌握这些知识，你可以构建出具有强大导航功能的Vue应用。在实际项目中，还可以根据需求...
Vue路由demo
08-03
Vue路由（Vue Router）是官方提供的强大路由管理器，它允许我们实现单页面应用（SPA）中的页面导航和状态管理。在Vue项目中，路由扮演着至关重要的角色，它帮助我们定义页面之间的跳转，并处理与这些跳转相关的数据...
vue路由分文件拆分管理详解
01-19
这里说的路由拆分指的是将路由的文件，按照模块拆分，这样方便路由的管理，更主要的是方便多人开发。具体要不要拆分，那就要视你的项目情况来定了，如果项目较小的话，也就一二十个路由，那么是拆分是非常没必要的。...
vue day05 路由的使用
parkwoojin1102的博客
06-27 284
什么是路由 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源 前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现； 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由） 如何使用路由 路由的安装 直接引用官网提供的cdn <script src="h.
Vue_路由的基本使用步骤
m0_74152912的博客
05-21 786
【代码】Vue_路由的基本使用步骤
Vue中的路由
weixin_64770583的博客
07-25 3万+
路由
【Vue】高级系列（九）路由 - vue-router - SPA - 基本路由 - 嵌套路由 - 编程式路由导航
YK菌的博客
02-25 2945
学习Vue-router
vue-router使用
weixin_41223530的博客
10-18 1万+
一、vue-router基本使用 二、vue-outer嵌套路由 三、vue-router参数传递 四、vue-router导航守卫 五、keep-alive
【vue】vue中的路由vue-router，vue-cli脚手架详细使用教程_vue-cli 路由(1)
2401_84412357的博客
05-01 621
nodejs把浏览器解释js的那一套嵌入到nodejs里面，例如控制台的使用前面学习了普通组件以后，接下来我们继续学习单文件组件则需要提前先安装准备一些组件开发工具。否则无法使用和学习单文件组件。一般情况下，单文件组件，我们运行在 自动化工具vue-CLI中，可以帮我们编译单文件组件。所以我们需要在系统中先搭建vue-CLI工具，官网：https://cli.vuejs.org/zh/Vue CLI 需要8.9 或更高版本 (推荐 8.11.0+)。你可以使用或。
Vue路由
m0_62943934的博客
02-17 1241
Vue 官方的一个路由插件，是一个第三方包
vue 路由使用实例
06-13
以下是一个简单的 Vue 路由使用实例： 1. 安装 Vue Router ``` npm install vue-router ``` 2. 在 main.js 文件中引入 Vue Router 并注册 ``` import Vue from 'vue' import VueRouter from 'vue-router' Vue....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值