Vue路由的使用

最新推荐文章于 2024-09-13 10:45:46 发布
最新推荐文章于 2024-09-13 10:45:46 发布
阅读量475 收藏 2
点赞数
分类专栏： Vue.JS 文章标签： vue vue.js javascript es6 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ChristWTF/article/details/104310895
版权

文章目录

一 Vue路由使用

1. vue-router安装

若package中没有vue-router则安装

npm install vue-router

2. vue-router实例文件组织

  1. /src/router/index.js
import VueRouter from 'vue-router'
import Vue from 'vue'
import home from '../components/home'
import about from '../components/about'

//使用插件
Vue.use(VueRouter)
//创建router对象
const routes = [
  {
    path: '',
    //redirect重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: home,
  },
  {
    path: '/about',
    component: about,
  }
]
const router = new VueRouter({
  //存放路由与组件的映射关系
  routes,
  //url去掉hash样式#
  mode: 'history',
  linkActiveClass: 'active'
  //统一修改标签激活类名
})
//导出
export  default router
  1. /src/main.js
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router: router,
  //或者简写
  render: h=> h(App)
})
  1. /src/App.vue
<template>
  <div>
    <router-link to="/home" tag="button" replace>首页</router-link>
    <router-link to="/about" tag="button" replace>关于</router-link>
    <router-view></router-view>
    <h2>看看是不是同一层级</h2>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
  .active{
    color:#f00;
  }
</style>
  1. /src/components/home.vue
<template>
  <div>
    <h1>首页</h1>
  </div>
</template>

<script>
  export default {
    name: "home"
  }
</script>

<style scoped>

</style>
  1. /src/components/about.vue
<template>
  <div>
    <h1>关于</h1>
  </div>
</template>

<script>
  export default {
    name: "about"
  }
</script>

<style scoped>

</style>
  1. index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>router</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3. vue-router相关标签

1. router-link

<router-link to="/home" tag="button" replace  active-class="active">首页</router-link>
//router-link标签默认会被解析为a标签
//但可以通过tag属性进行指定
//to属性为要跳转的组件
//replace指定页面中组件切换模式（组件切换后浏览器左上角的< > 不可用）
//active-class指定点击后标签添加的类名
//想统一修改标签激活后添加的类名，可以在/src/router/index.js文件router实例中添加linkActiveClass: 'active'

2. router-view

<router-view></router-view>
<h2>看看是不是同一层级</h2>//同一层级
//跳转的组件在DOM中的位置，与其他标签在同一层级

4. vue-router代码跳转

<template>
  <div id="app">
    <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>
    <router-view></router-view>
    <h2>看看是不是同一层级</h2>
  </div>
</template>

<script>

export default {
  name: 'App',
  methods: {
    homeClick(){
      //通过代码方式修改路由vue-router
      //this.$router.push('/home')
      this.$router.replace('/home')
    },
    aboutClick(){
      this.$router.push('/about')
    }
  }
}
</script>

<style>
  .active{
    color:#f00;
  }
</style>

5. vue-router动态路由

  1. /src/router/index.js
import VueRouter from 'vue-router'
import Vue from 'vue'
import home from '../components/home'
import about from '../components/about'
import user from '../components/user'
//使用插件
Vue.use(VueRouter)
//创建router对象
const routes = [
  {
    path: '',
    //redirect重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: home,
  },
  {
    path: '/about',
    component: about,
  }
  //添加 :id 用id接收传过来的参数
  {
    path: '/user/:id',
    component: user
  }
]
const router = new VueRouter({
  //存放路由与组件的映射关系
  routes,
  //url去掉hash样式#
  mode: 'history',
  linkActiveClass: 'active'
  //统一修改标签激活类名
})
//导出
export  default router
  1. /src/main.js
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router: router,
  //或者简写
  render: h=> h(App)
})
  1. /src/App.vue
<template>
  <div id="app">
    <router-link to="/home" tag="button" replace  active-class="active">首页</router-link>
    <router-link to="/about" tag="button" replace active-class="active">关于</router-link>
    //添加用户router 数据来源userId
    <router-link :to="'/user/' + userId">用户</router-link>
    <router-view></router-view>
    <h2>看看是不是同一层级</h2>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return{
      userId: 'zhangsan'
    }
  }
}
</script>

<style>
  .active{
    color:#f00;
  }
</style>
  1. /src/components/user.vue
<template>
  <div>
    <h2>用户为 {{userId}}</h2>
    <h2>或者 {{$route.params.id}}</h2>
  </div>
</template>

<script>
  export default {
    name: "user",
    computed: {
      userId() {
      //************注意是 route **********
      //获得route传过来的参数
        return this.$route.params.id
      }
    }
  }
</script>

<style scoped>

</style>

6. vue-router懒加载

一个路由编译成一个文件，解决打包后所有路由都在一个文件里导致加载事件过长
index.js

import VueRouter from 'vue-router'
import Vue from 'vue'

const home = () => import('../components/home')
const about = () => import('../components/about')
const user = () => import('../components/user')

//使用插件
Vue.use(VueRouter)
//创建router对象
const routes = [
  {
    path: '',
    //redirect重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: home,
    //component: () => import('../components/home')
  },
  {
    path: '/about',
    component: about,
  },
  {
    path: '/user/:id',
    component: user
  }
]
const router = new VueRouter({
  //存放路由与组件的映射关系
  routes,
  //url去掉hash样式#
  mode: 'history',
  linkActiveClass: 'active'
})
//导出
export  default router

7. vue-router子路由

  1. homeChild.vue
<template>
  <div>
    <h1>一个开心的子组件</h1>
  </div>
</template>

<script>
  export default {
    name: "homeChild"
  }
</script>

<style scoped>

</style>
  1. home.vue
<template>
  <div>
    <h1>首页</h1>
    <router-link to="/home/child">子组件</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: "home"
  }
</script>

<style scoped>

</style>
  1. index.js
import VueRouter from 'vue-router'
import Vue from 'vue'

const home = () => import('../components/home')
const homeChild = () => import('../components/homeChild')
const about = () => import('../components/about')
const user = () => import('../components/user')

//使用插件
Vue.use(VueRouter)
//创建router对象
const routes = [
  {
    path: '',
    //redirect重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: home,
    //component: () => import('../components/home')
    children: [
      {
        path: 'child',//子组件这里不加/
        component: homeChild,
      }
    ]
  },
  {
    path: '/about',
    component: about,
  },
  {
    path: '/user/:id',
    component: user
  }
]
const router = new VueRouter({
  //存放路由与组件的映射关系
  routes,
  //url去掉hash样式#
  mode: 'history',
  linkActiveClass: 'active'
})
//导出
export  default router

8. vue-router参数传递

  1. profile.vue
<template>
  <div>
    <h1>这是个开心的profile</h1>
    <h2>{{$route.query}}</h2>
    <h2>{{$route.path}}</h2>
  </div>
</template>

<script>
  export default {
    name: "profile"
  }
</script>

<style scoped>

</style>
  1. App.vue
<template>
  <div id="app">
    <router-link to="/home" tag="button" replace  active-class="active">首页</router-link>
    <router-link to="/about" tag="button" replace active-class="active">关于</router-link>
    <router-link :to="'/user/' + name">用户</router-link>
    <router-link :to="{path: '/profile', query:{name: 'pro'}}">档案</router-link>
    <router-view></router-view>
    <h2>看看是不是同一层级</h2>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return{
      name:'si',
      userId: 'zhangsan',
    }
  }
}
</script>

<style>
  .active{
    color:#f00;
  }
</style>
  1. index.js
import VueRouter from 'vue-router'
import Vue from 'vue'

const home = () => import('../components/home')
const homeChild = () => import('../components/homeChild')
const about = () => import('../components/about')
const user = () => import('../components/user')
const profile = () => import('../components/profile')
//使用插件
Vue.use(VueRouter)
//创建router对象
const routes = [
  {
    path: '',
    //redirect重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: home,
    //component: () => import('../components/home')
    children: [
      {
        path: 'child',//子组件这里不加/
        component: homeChild,
      }
    ]
  },
  {
    path: '/about',
    component: about,
  },
  {
    path: '/user/:id',
    component: user
  },
  {
    path: '/profile',
    component: profile
  }
]
const router = new VueRouter({
  //存放路由与组件的映射关系
  routes,
  //url去掉hash样式#
  mode: 'history',
  linkActiveClass: 'active'
})
//导出
export  default router

9. vue-router导航守卫

index.js
先给路由加上meta（元数据）
再统一配置 router.beforeEach

import VueRouter from 'vue-router'
import Vue from 'vue'

const home = () => import('../components/home')
const homeChild = () => import('../components/homeChild')
const about = () => import('../components/about')
const user = () => import('../components/user')
const profile = () => import('../components/profile')
//使用插件
Vue.use(VueRouter)
//创建router对象
const routes = [
  {
    path: '',
    //redirect重定向
    redirect: '/home',
  },
  {
    path: '/home',
    component: home,
    //component: () => import('../components/home')
    children: [
      {
        path: 'child',//子组件这里不加/
        component: homeChild,
      }
    ],
    meta: {
      title:'首页'
    }
  },
  {
    path: '/about',
    component: about,
    meta: {
      title:'关于'
    }
  },
  {
    path: '/user/:id',
    component: user,
    meta: {
      title:'用户'
    }
  },
  {
    path: '/profile',
    component: profile,
    meta: {
      title:'档案'
    }
  }
]
const router = new VueRouter({
  //存放路由与组件的映射关系
  routes,
  //url去掉hash样式#
  mode: 'history',
  linkActiveClass: 'active'
})

router.beforeEach((to,from,next)=>{
  document.title = to.matched[0].meta.title
  next()//必须调用，否则路由无法跳转
})
//导出
export  default router

10. vue-router keep-alive（使跳转不被销毁）

App.vue

<template>
  <div id="app">
    <router-link to="/home" tag="button" replace  active-class="active">首页</router-link>
    <router-link to="/about" tag="button" replace active-class="active">关于</router-link>
    <router-link :to="'/user/' + name">用户</router-link>
    <router-link :to="{path: '/profile', query:{name: 'pro'}}">档案</router-link>
<!--将 router-view 放在keep-alive中 exclude表明除去哪些组件-->
    <keep-alive exclude="profile,user">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return{
      name:'si',
      userId: 'zhangsan',
    }
  }
}
</script>

<style>
  .active{
    color:#f00;
  }
</style>

11. 记录浏览状态

<template>
  <div>
    <h1>我是首页</h1>
    <router-link to="/home/news" tag="button">news</router-link>
    <router-link to="/home/detail" tag="button">detail</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: "home",
    data(){
      return {
        path:''
      }
    },
    activated() {
      this.$router.push(this.path)
    },
    beforeRouteLeave(to,from,next){
      this.path = this.$route.path
      next()
    }
  }
</script>

<style scoped>

</style>
超人不会飞/
关注
专栏目录
vue路由使用步骤
weixin_61032994的博客
04-26 2738
1.导入路由 2.使用路由 3.创建路由规则数组（即定义路由配置） 4.实例化路由 5.导出路由对象 6.在main.js文件里加入路由对象 参考链接
vue路由的创建及基本使用
04-15
以上就是Vue Router的基础用法，包括路由的创建、动态路由与查询参数的传递、导航守卫、元信息以及动画和组件模板的使用。通过掌握这些知识，你可以构建出具有强大导航功能的Vue应用。在实际项目中，还可以根据需求...
导航守卫之全局守卫
gabby____的博客
10-17 968
全局守卫 1、点页面中任意一元素弹出信息 2、点页面中任意一元素弹出信息后，继续显示该页面 3、如果点注册或登录则显示该页面，否则点其他则显示还没登录并 ...
vue-1.0-4.0/promis4.3异步请求/父子组件1.0/动态路由3.4/懒加载3.5/导航守卫3.7/-修改文件路径的引用问题......
南下有你
12-29 188
1--------------------父子组件传递关系 子组件：props:{ banners:{ type:Array, default(){ return[] } } } 父组件： 视口模式 npm install postcss-px-to-viewport --save-...
Vue.js学习第十六天——网络请求模块axios及项目相关
beanBag
02-22 404
Vue.js学习第十六天——网络请求模块axios及项目相关 在开发项目的过程中，一定会使用到网络请求，使用一个合适的网络请求模块是很重要的，不论哪一种网络请求方式我们都需要自己封装，防止项目代码过于庞大不易管理，那么选择什么网络模块开发我们后边的项目呢？ 参考一 、Ajax，ajax是基于XMLHttpRequest(XHR)，但是配置后调用该方式非常混乱，真实开发很少用，所以不推荐 参考二、 ...
Vue 路由使用方法详解：从基础到高级
m0_58013334的博客
08-19 2752
Vue 是一款流行的前端框架，它提供了强大的路由功能，用于构建单页应用程序（SPA）。Vue 路由能够帮助我们实现页面之间的无缝切换和导航，提升用户体验。本文将详细介绍 Vue 路由的使用方法，包括基础配置、路由参数传递、导航守卫等，帮助你充分发挥 Vue 路由的潜力。
Vue 路由的基本使用
Errol's Blog
04-14 4309
文章目录路由的理解路由的基本使用一些注意点 路由的理解 生活中的路由： vue-router的理解： vue 的一个插件库，专门用来实现SPA应用(single page web application) 对SPA应用的理解： 1.单页Web应用(single page web application，SPA) 2.整个应用只有一个完整的页面 3.点击页面中的导航链接不会刷新页面，只会做页面的局部更新 4.数据需要通过ajax请求获取 什么是路由? 1.—个路由就是一组映射关系 (key - value
vue路由的使用
mushroomLNL的博客
01-16 4209
路由 1. 理解: 一个路由(router)就是一组映射关系(key-value),多个路由需要的路由器(router)进行管理 2. 前端路由: key是路径,value是组件 1.基本使用 安装vue-router,命令: npm i vue-router 引入vue-router之后应用插件: Vue.use(VueRouter) 编写router配置项 //该文件专门创建整个应用的路由器 import VueRouter from 'vue-router' //引入组件 import
Vue中的路由
热门推荐
weixin_64770583的博客
07-25 3万+
路由
vue3路由基本使用
最新发布
qq_48763502的博客
09-13 4167
在 Vue 3 中，路由指的是应用程序的导航系统，允许你在不同的视图或页面之间进行切换。通过 vue-router 插件，你可以定义路由规则，将 URL 路径映射到 Vue 组件，实现页面间的跳转和状态管理。使用路由，用户可以在应用中导航不同的视图，同时保持浏览器的历史记录。 2. 创建路由配置 定义路由配置通常在一个单独的文件中完成，例如 router/index.js 或 router/index.ts。配置包括路径、组件和其他路由属性： 3. 在应用中使用路由 在你的 Vue 应用中，通常会在 mai
cdn方式的vue路由使用
qq_41756580的博客
06-14 4482
首先引入cdn: <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> 引入cdn后便可以...
Vue 解决路由过渡动画抖动问题(实例详解)
10-15
在开发使用Vue.js框架的单页面应用（SPA）时，路由过渡动画是提升用户体验的重要方面之一。然而，在实现过渡动画时，可能会遇到页面抖动的问题，这会破坏用户体验。本文详细介绍了如何解决Vue在路由过渡过程中出现的...
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
10-14
总之，在使用Vue Router开发单页应用时，合理地利用路由缓存、路由嵌套、路由守卫和滚动行为自定义，可以有效提升应用的用户体验和维护效率。本篇内容涉及了这几个方面的基础知识和实际应用方法，对于希望深入学习...
详解vue路由篇(动态路由、路由嵌套)
12-08
在 Vue 中，`vue-router` 是官方提供的路由管理器，它使得单页面应用（SPA）能够根据 URL 地址切换不同的视图。路由的主要职责是根据 URL 映射到相应的组件，从而实现页面间的导航。 一、基础路由 创建 Vue 项目时...
解决vue路由name同名,路由重复的问题
10-15
总之，解决Vue路由name同名和路由重复的问题，需要开发者在设计路由配置时遵循命名唯一性的原则，并在遇到路由跳转失败时仔细检查路由配置的正确性。通过不断的实践和调试，可以总结出一套适用于自己项目的路由使用...
Vue语法，看这一篇就够了
不停
02-11 1万+
文章目录一 初识Vue二 Vue模板语法1. Mustache语法(双大括号)2. v-once（静态数据）3. v-html（添加标签）4. v-text（添加文本）5. v-pre（禁止解析）6. v-cloak（遮挡）7. v-pre（禁止解析）8. v-bind（:）（动态绑定属性）9. v-on（@）（监听事件）10. v-if v-else-if v-else11. v-show12....
axios网络模块封装
不停
02-28 838
文章目录一 WHY axios二 axios 封装 一 WHY axios 在浏览器中发送XMLHttpRequests请求 在nodejs中发送http请求 支持Promise API 拦截请求和响应 转换请求和响应数据 二 axios 封装 /src/main.js import Vue from 'vue' import App from './App' import axios f...
Vue组件化理解与使用
不停
02-12 505
文章目录一 Vue组件化1. 组件使用的三个步骤2. 全局组件（多个Vue实例中可用）3. 局部组件（只在自身Vue实例可用）4. 父子组件（组件中复用组件）5. 语法糖注册组件6. 模板分离7. 组件数据存放8. 父子组件通信-父传子9. 父子组件通信-子传父 一 Vue组件化 应用会被抽象成一棵组件树 1. 组件使用的三个步骤 创建组件构造器 Vue.extend() 注册组件 Vue.co...
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、付费专栏及课程。

余额充值