vue路由相关理解

最新推荐文章于 2023-03-30 19:49:42 发布

Li Derong

最新推荐文章于 2023-03-30 19:49:42 发布

阅读量833

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript 后端

本文链接：https://blog.youkuaiyun.com/model__/article/details/121662844

本文介绍了Vue Router在SPA应用中的作用，详细解析了路由的概念和前端路由的特性。通过实例展示了如何配置和使用Vue Router，包括子路由的设置、动态路由参数的传递，并提供了代码示例。在实际操作中应注意路由组件的生命周期和路由信息的访问。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.相关理解
1.1 vue-router的理解

vue的一个插件库，专门用来实现SPA应用
1.2 对SPA应用的理解

但Web应用整个应用只有一个完整的页面点击页面中的导航链接不会刷新页面（而类似于a标签则会默认刷新页面），指挥做页面的局更新，数据需要通过ajax请求来获取。

1.3 路由的理解
路由理解：一个路由（route）就是一组映射关系（key-value），多个路由需要看路由器（router）进行管理
前端路由：key是路径，value是路由组件

基本使用如下（代码）：

import Vue from 'vue'
//引入vueRouter
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue.vue'
 
Vue.use(VueRouter)
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
 
  }
]
//创建router示例对象，去管理一组一组的路由规则
const router = new VueRouter({
  routes
})
 
//暴露router
export default router

几个注意点

    路由组件通常放在pages文件夹下，一般组件通常放在componnets文件夹下
    通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
    每个路由组件都有自己的$route属性，里面存储着自己的路由信息
    整个应用之只有一个router，可以通过组件的$router属性获取到。

使用

配置路由（代码）如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import New from '../views/News.vue'
 
 
Vue.use(VueRouter)
 
const routes = [{
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    children: [{//通过children配置子级路由
      path: 'news',//此处不要写成：/news
      component:News
    }]
  }
]
 
const router = new VueRouter({
  routes
})
 
export default router

2.显示路由

3.跳转的时候需要写完整的路径

<router-link to="/about/news">news</router-link>

路由传递参数（两种方式）

About路由组件页面

<template>
  <div class="about">
<!-- 向news路由传递参数-->
    <router-link to="/about/news">news</router-link>|
    <ul>
      <li v-for="m in list" :key="m.id">
        <router-link :to="{
          path:'/about/news',
          query:{
            id:m.id,
            name:m.name
          }
        }">{{m.name}}</router-link>
      </li>
    </ul>
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: "haung" },
        { id: 2, name: "xu" },
        { id: 3, name: "hu" }
      ]
    };
  }
};
</script>

News路由组件页面

<template>
  <div>
    <ul>
      <li>hi:{{this.$route.query.id}}我是{{this.$route.query.name}}</li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {};
  },
  mounted(){
      console.log(this.$route)
  }
};
</script>
 
<style>
</style>

结果

这次分享就到这里，下次回见！