【VUE】vue.js中的路由router

最新推荐文章于 2024-05-01 10:35:54 发布
最新推荐文章于 2024-05-01 10:35:54 发布
阅读量601 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43569834/article/details/132596735
版权

前言：

本章节我们将为大家介绍 Vue.js 路由。

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

Vue.js 路由需要载入 vue-router 库

中文文档地址：vue-router文档。

一、安装router：

1、直接下载 / CDN

https://unpkg.com/vue-router/dist/vue-router.js

2、CNPM

推荐使用淘宝镜像：

cnpm install vue-router  //会默认安装在node_modules文件中
//cnpm install -g vue-router //会安装在全局目录中（类似python的虚拟环境和全局环境）

二、简单路由

  1. 创建路由规则文件

    1. 路径：src/router/index.js

  2. 将router挂载到vue实例

    1. main.js文件中的注释5.2

  3. 路由参数类型

    1. 路径参数 （params只能通过name来引入路由，path会undefined）
    2. 查询字符串参数 （query可以通过name或path来引入路由）

  4. 路由跳转

    1. 使用router-link
    2. to属性可以为path路径、命名路由以及路径参数和查询字符串参数

  5. element ui的案例 

步骤：

1、将example里的。。。粘贴到src/router/index.js里

路由的创建站们放到单独的文件里components/router/index.js

// track number of popstate listeners
import Vue from 'vue'
import VueRouter from 'vue-router'

// 1. Use plugin.
// This installs <router-view> and <router-link>,
// and injects $router and $route to all router-enabled child components
Vue.use(VueRouter)

// 2. Define route components 在src/router/index.js中导入子组件
import greeting from "../components/greeting";
import projectlist from "../components/projectlist";
import projectlistNew from "../components/projectlistNew";
import login from "../components/login";
import loginNew from "../components/loginNew";
import HelloWorld from "@/components/HelloWorld";

// 3. Create the router 在src/router/index.js中创建路由：一个routers数组中的一个对象，就是一条路由
const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: HelloWorld,name:'hello-world'},
        { path: '/projectlist1', component: projectlist,name:'projectlist1' },
        { path: '/projectlist2', component: projectlistNew,name:'projectlist2' },
        { path: '/login1', component: login,name:'login1' },
        { path: '/login2', component: loginNew,name:'login2' },
        { path: '/greeting', component: greeting,name:'greeting' }
    ]
});
// 4、导出路由
export default router;

main.js文件：

//导入vue.js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//导入App.vue根组件
import App from './App.vue'
//5.1、导入vue router对象
import router from './router/index'
import loginNew from "@/components/loginNew";
//创建全局组件
Vue.component('login-New',loginNew);
//在导入Vue实例之前，要将element-ui插件加入到Vue中
Vue.use(ElementUI);
Vue.config.productionTip = false


new Vue({
    //5.2、把router挂载到Vue实例中去
  router,
  render: h => h(App),//渲染App根组件
}).$mount('#app')

 App.vue文件

使用路由前：
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/jack_li.png">
    <HelloWorld msg="欢迎来到 Vue.js App"/>
    <greeting data_1="这是个app父组件传参给子组件"/>
    <projectlist></projectlist>
    <projectlistNew></projectlistNew>
    <login></login>
    <login-New></login-New>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import greeting from './components/greeting.vue'
import projectlist from "@/components/projectlist";
import projectlistNew from "@/components/projectlistNew";
import login from "@/components/login";
import loginNew from "@/components/loginNew";

export default {
  name: 'App',
  components: {
    HelloWorld,
    greeting,
    projectlist,
    projectlistNew,
    login,
    loginNew
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

img {
  width: 150px;
  height: 150px;
}
</style>

 

 不足：我们需要手动的修改路径才能跳转到不同页面

  使用路由后：
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/jack_li.png">
    <ul>
      <li>
        <router-link :to="{name:'hello-world'}">菜单一HelloWorld</router-link>
      </li>
      <li>
        <router-link :to="{name:'projectlist1'}">菜单二projectlist</router-link>
      </li>
      <li>
        <router-link :to="{name:'projectlist2'}">菜单三projectlistNew</router-link>
      </li>
      <li>
        <router-link :to="{name:'login1'}">菜单四login</router-link>
      </li>
      <li>
        <router-link :to="{name:'login2'}">菜单五loginNew</router-link>
      </li>
      <li>
        <router-link :to="{name:'greeting',params:{username:'高老庄'}}">菜单六greeting</router-link>
      </li>
      <li>
        <router-link :to="{name:'xibo_test_index'}">菜单七xibo_index</router-link>
      </li>
    </ul>
    <!--    展示路由的页面内容-->
    <router-view></router-view>
  </div>
</template>

<script>

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

img {
  width: 150px;
  height: 150px;
}
</style>

 

  • 在App.vue的<template>标签内中<router-view></router-view>展示路由的页面内容
    • 不足：必须要手动改变路由才能跳转到不同页面
    • 优化：在父组件的标签内使用<router-link to="路由路径"></router-link>可以达到点击标签就可以跳转页面
      • to属性默认为path路径值，
        • 不足：如果一个地方改变，就要修改2个地方路径
        • 优化：可以在path中添加name属性,然后在父组件中:to="{name:name_value"}

三、嵌套路由

在index.js文件中,

{
    path: '/login1',
    component: login,
    name: 'login1',
    children: [
        // an empty path will be treated as the default, e.g.
        // components rendered at /parent: Root -> Parent -> Default
        // {path: '', component: login, name: 'login1'},
        //如果加/，则会从根路由开始匹配，http://localhost:8081/login2
        {path: '/login2', component: loginNew, name: 'login2'},
        //如果不加/，则会自动拼接到父路由后面，http://localhost:8081/login1/login2
        {path: 'login2', component: loginNew, name: 'login2'},

四、查询字符串参数/路径参数

4.1、在子组件中可以通过this.$route.query.username来获取查询字符串参数；
methods:{
  //方法一：
  // changeusername:function (){
  //   this.username="dalao"
  // },
  //方法二：推荐使用
  changeusername(){
    this.username="一个没有整容需求的人"
  }
},
created() {
  console.log("实例创建之后，能够获取到this");
  console.log("username为：",this.username);
  this.username=this.$route.query.name;
  this.age=this.$route.query.age;

4.2、路径参数：在url上（在ptah中路径+":参数")

查询路径参数,this.$route.params.username

 

路由文件index.js
const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: HelloWorld,name:'hello-world'},
        { path: '/projectlist1', component: projectlist,name:'projectlist1' },
        { path: '/projectlist2', component: projectlistNew,name:'projectlist2' },
        { path: '/login1', component: login,name:'login1' },
        { path: '/login2', component: loginNew,name:'login2' },
        //路径参数：在url上（在ptah中路径+":参数")
        { path: '/greeting/:username', component: greeting,name:'greeting' }
    ]
子组件 greeting.vue
created() {
  console.log("实例创建之后，能够获取到this");
  console.log("username为：",this.username);
  this.username=this.$route.query.name;
  this.age=this.$route.query.age;
  this.username=this.$route.params.username;
  // this.age=this.$route.params.age;
},
4.2.1、还有一种方法获取路径参数 就是：

在template里参数写成{{this.$route.params.username}}

<p>username为：{{this.$route.params.username}}</p>

然后在created（）就不用写this.username=this.$route.params.username

created() {
    //获取路径参数
// this.username=this.$route.params.username;
    }

jquery传参和params传参的区别

1、用法上：

上文已经提到query可以用name或path来引入

params必需要用name来引入，接收参数都是类似的，分别是：

this.$route.query.name和

2、地址栏表现形式上：

query：

/login?id=10&name=zs

params：

/login/12/ls

注意：

这里的12和ls对应的是/:id/:name；

这两个参数可以不写，那么就不会再地址栏上显示；

不过刷新页面，参数会消失；

写上参数刷新页面，参数不会消失。

 

query方式传参和接收参数

传参:

this.$router.push({
        path:'/detail/:id',
        query:{
          id:id
        }
      })

接收参数:

this.$route.query.id

params方式传参和接收参数

传参:

this.$router.push({
        name:'Detail',
        params:{
          id:id
        }
      })

接收参数：

this.$route.params.id

Tips:

params传参，push里面只能是 name:‘xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！

切换路由

 

// query通过path切换路由
<router-link :to="{path: 'Detail', query: { id: 1 }}">前往Detail页面</router-link>
// params通过name切换路由
<router-link :to="{name: 'Detail', params: { id: 1 }}">前往Detail页面</router-link>

简单说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，浏览器刷新页面不会消失，而params相当于post请求，参数不会在地址栏中显示，浏览器刷新页面后消失。

Vue3 -- 路由【谁学谁真香系列2】
qq_53002037的博客
10-29 555
vue3 路由学习 共勉
Vue.js之路由（router）
u011573295的博客
07-27 598
一、router简介 在后端程序中，我们是使用的servlet或者springMVC来匹配前端的http请求，并响应相关的数据发送给前端。 在前端程序中，一个单应用程序，通过一个hash（#号）改变来切换页面的展示。 http://localhost:63342/mywebpack/index.html#/login http://localhost:63342/mywebpack/index.html#/register 前端路由的优点在于，我们只是展示页面可以不需要通过http来请求后端响应，
vue-router.js
05-14
这是Vue框架的已经js库，现在在网上比较难找到，在这里分享给大家使用。
Vue.js——vue-router 60分钟快速入门
dengjie0448的博客
07-21 1156
概述 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。 本文将以示例的形式来介绍vue-router的各个特性，一共包...
vue路由 router.js
weixin_43222587的博客
08-26 1304
1、先引入vue，vue-router文件和各组件 import Vue from 'vue' import Router from 'vue-router' import Logsj from "@/pages/Logsj" import Logmm from "@/pages/Logmm" import Index from "@/pages/Index" import Detail from...
Vue.js中的router基础(一级、二级、动态、传参、接参)
纸飞机博客
04-28 1053
vue 路由的mode(模式)有几种， 分别是什么？在那些环境下运行？ hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器...
vue.js之路由Router（一）
陈小陈的博客
01-04 464
vue Router 官网
vue.mini.js vue-router.js
01-04
vue-router.js 文件即为Vue Router的实现，它提供了导航、路由配置、动态路由匹配、嵌套路由、回退处理等功能，使得在Vue应用中管理页面间的跳转变得简单易行。 在Vue项目中，Vue Router的使用通常包括以下步骤： ...
vue.min.js和vue-router.min.js
06-29
Vue Router 是Vue.js官方的路由管理器，它与Vue.js深度集成，让单页面应用（SPA）的导航变得简单。"vue-router.min.js" 文件则是Vue Router的压缩版本，同样适用于生产环境，提供了路径匹配、导航守卫、组件懒加载等...
vue路由的依赖文件，vue-router.min.js
03-13
vue路由的依赖文件，vue-router.min.js
详解Vue.js搭建路由报错 router.map is not a function
10-19
在实际项目开发中，我们常常会用到Vue Router来处理应用的路由管理，以便实现页面间的导航和状态管理。然而，有时候在搭建Vue Router时可能会遇到"router.map is not a function"这样的错误，这通常是由于版本不兼容...
vue-router
05-06
vue-router 案例包括一级路由和二级路由的使用方法，为大家提供学习的案例
vue 项目再js文件使用router
我不是一个假前端的博客
04-21 2118
第一步，引用 import Router from '@/router' 第二部，使用 Router.push({name: 'Login'})
vue pc项目 router.js 配置详解 ，vue项目中路由懒加载的正确使用，vue实现动态路由一步到位
m0_49515138的博客
11-17 4471
这个是我之前一个项目的router.js 文件 xmjd 路由懒加载: 使用() => import();的方式导入组件 这样可以在进入当前路由的时候加载路由 如果不使用懒加载 会在第一次进入页面后 一次性加载所有路由 所以首屏加载会慢如果一个项目过大 大量的使用路由懒加载会导致页面的热更新过慢 推荐在开发环境下不使用懒加载 这样有利于开发的效率 在生产环境可以使用路由懒加载通过process.env.NODE_ENV可以访问到当前是什么环境 可以在utils文件夹下创建两个文件 util.import.
vue.js如何使用vue-router实现页面的跳转？
闫小样丶的博客
10-17 1732
最近在做vue的项目，因为项目自身的一些原因，不能使用脚手架去搭建项目，所以只能使用vue.js来引入的方式实现。 那么，这就涉及到一个问题。用vue.js引入的方式如何用路由实现页面的跳转呢？在网上找了很多的资料，基本上很多都是使用脚手架去配置路由的。最后查看了 Vue Router官方文档，终于找到了实现路由跳转的方式。在此记录一下学习过程，以便自己加深印象。 HTML： <...
Vue项目配置router.js详细步骤
Huagg24的博客
11-28 3156
第一次写Vue项目，要用到router.js,看了一下官方文档，还是很懵逼，不知道怎么配置，又去看视频查资料，最后终于搞定了。话不多说，先上代码，我再讲一些要注意的细节一、第一次配置，还是花了一些时间理解的，这个router目前我来看作用就是在不刷新页面的情况下进行一个页面跳转，中途还出现了无法正常显示的情况，最后发现是版本问题。还好解决了。希望能帮助到大家。
javascript router
weixin_34218890的博客
07-28 115
2019独角兽企业重金招聘Python工程师标准>>> ...
vue3与js的router基本使用方式
qq_55097440的博客
05-01 1486
title: vue3与js的router基本使用方式。
定义路由组件Home.vue和About.vue 在App.vuez中定义路由链接和路由视图 创建路由模块router.js 挂载路由模块
最新发布
05-28
定义路由组件 Home.vue 和 About.vue 是为了在路由链接被点击时，可以显示不同的组件内容。在 App.vue 中定义路由链接和路由视图是为了将路由链接和路由视图结合起来，使得在页面中显示不同的组件内容。创建路由模块 router.js 是为了将路由链接和路由视图进行管理和组织，方便统一管理和维护。 下面是每个步骤的具体介绍： 1. 定义路由组件 Home.vue 和 About.vue：在这两个组件中分别编写对应的模板、样式和逻辑代码，用于在页面中显示不同的内容。 2. 在 App.vue 中定义路由链接和路由视图：在 App.vue 中使用 router-link 标签定义路由链接，使用 router-view 标签定义路由视图。其中，router-link 标签用于跳转到不同的路由路径，router-view 标签用于展示不同的路由组件内容。 3. 创建路由模块 router.js：在 router.js 中使用 VueRouter 实例进行路由管理和组织。通过配置 routes 属性来定义不同的路由路径和对应的组件，然后在 router 实例中注册这些路由规则。 4. 挂载路由模块：在 main.js 中将 router 实例挂载到 Vue 实例上，使得整个应用程序可以使用该实例进行路由跳转和管理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

高老庄里的高小翠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值
>