Vue路由的使用

最新推荐文章于 2023-08-19 11:47:50 发布
最新推荐文章于 2023-08-19 11:47:50 发布
阅读量450 收藏 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>
超人不会飞/
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue路由使用步骤
weixin_61032994的博客
04-26 2637
1.导入路由 2.使用路由 3.创建路由规则数组（即定义路由配置） 4.实例化路由 5.导出路由对象 6.在main.js文件里加入路由对象 参考链接
vue3 路由的使用
m0_49515138的博客
02-03 2万+
name 是路由的名称，非必填，但是一般都会配置上去，这样可以很方便的通过 name 来代替 path 实现路由的跳转，因为像有时候的开发环境和生产环境的路径不一致，或者说路径变更，通过 name 无需调整，但如果通过 path，可能就要修改很多文件里面的链接跳转目标了。所以 Vue 在 Webpack 的代码分割功能的基础上，推出了 异步组件，可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样按需载入，很方便的实现路由组件的懒加载。
导航守卫之全局守卫
gabby____的博客
10-17 954
全局守卫 1、点页面中任意一元素弹出信息 2、点页面中任意一元素弹出信息后，继续显示该页面 3、如果点注册或登录则显示该页面，否则点其他则显示还没登录并 ...
vue-1.0-4.0/promis4.3异步请求/父子组件1.0/动态路由3.4/懒加载3.5/导航守卫3.7/-修改文件路径的引用问题......
南下有你
12-29 168
1--------------------父子组件传递关系 子组件：props:{ banners:{ type:Array, default(){ return[] } } } 父组件： 视口模式 npm install postcss-px-to-viewport --save-...
Vue.js学习第十六天——网络请求模块axios及项目相关
beanBag
02-22 371
Vue.js学习第十六天——网络请求模块axios及项目相关 在开发项目的过程中，一定会使用到网络请求，使用一个合适的网络请求模块是很重要的，不论哪一种网络请求方式我们都需要自己封装，防止项目代码过于庞大不易管理，那么选择什么网络模块开发我们后边的项目呢？ 参考一 、Ajax，ajax是基于XMLHttpRequest(XHR)，但是配置后调用该方式非常混乱，真实开发很少用，所以不推荐 参考二、 ...
Vue 路由使用方法详解：从基础到高级
最新发布
m0_58013334的博客
08-19 2572
Vue 是一款流行的前端框架，它提供了强大的路由功能，用于构建单页应用程序（SPA）。Vue 路由能够帮助我们实现页面之间的无缝切换和导航，提升用户体验。本文将详细介绍 Vue 路由的使用方法，包括基础配置、路由参数传递、导航守卫等，帮助你充分发挥 Vue 路由的潜力。
Vue 路由的基本使用
Errol's Blog
04-14 4245
文章目录路由的理解路由的基本使用一些注意点 路由的理解 生活中的路由： 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 4168
路由 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万+
路由
cdn方式的vue路由使用
qq_41756580的博客
06-14 4374
首先引入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路由入门使用
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语法，看这一篇就够了
不停
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 810
文章目录一 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 482
文章目录一 Vue组件化1. 组件使用的三个步骤2. 全局组件（多个Vue实例中可用）3. 局部组件（只在自身Vue实例可用）4. 父子组件（组件中复用组件）5. 语法糖注册组件6. 模板分离7. 组件数据存放8. 父子组件通信-父传子9. 父子组件通信-子传父 一 Vue组件化 应用会被抽象成一棵组件树 1. 组件使用的三个步骤 创建组件构造器 Vue.extend() 注册组件 Vue.co...
vue-cli and webpack配置（理解）
不停
02-13 308
文章目录一 初识Webpack1. 未配置的webpack打包2. webpack配置-JS3. webpack配置-CSS4. webpack配置-Less 一 初识Webpack 1. 未配置的webpack打包 webcpack ./src/main.js ./dist/bundle.js 2. webpack配置-JS 创建webpack.config.js文件 配置（配置完命令行输入...
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、付费专栏及课程。

余额充值