vue的路由Route安装和使用

最新推荐文章于 2024-04-29 22:22:14 发布
最新推荐文章于 2024-04-29 22:22:14 发布
阅读量1.5k 收藏 3
点赞数
分类专栏： 前端 文章标签： vue react app js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CharLINHeng/article/details/107124111
版权
路由

​ 在vue中，route,即为前端路由。下面是专业名词解释：

在这里插入图片描述

前端渲染和后端渲染

在这里插入图片描述

在这里插入图片描述
在使用route之前，我们需要知道一些基础知识：
在这里插入图片描述

改变url不刷新页面:

使用hash值来进行变化route。

location.hash("路径")
通过html对象修改url：
history.pushState(data,title,url)

在该基础上，把urlpush进堆栈。然后使用back方法，弹出栈

history.back()

上面是用push方法，就是一直压栈和出栈，下面是用replace来进行代替当前站点，就不是栈方法：

history.replaceState(data,title,url)

使用go来进行前后移动：

history.go(-2)

或者向前:

history.go(2)

history.forward()
vue-route的使用

在这里插入图片描述

npm install vue-route --save

安装成功后，有在src下有route文件夹：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
//先使用 vue的uuse来使用vueroute
Vue.use(VueRouter)
//定义route路由
  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]
//history模式就是我们学的history的go，reward。pushState。replaceState啊等。
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
//导出route组件
export default router
创建组件

​ 在compoments文件夹下面创建about.vue:

<template>
  <div>
      <h2>
          我是about页面...
      </h2>
  </div>
</template>
<script>
</script>
<style scoped>
</style>

编写App.vue。创建两个标签，点击哪个，显示哪个页面，运行如下:

C:\Users\xiaoc\Desktop\一些杂文件\a3.gif

第一个页面加载[使用重定向方法]:

  {
      path: '/',
      name:'first',
      redirect: '/pagehome'
    },

效果：

在这里插入图片描述

使用history模式来避免url地址中出现#，在route目录下的index.js中定义：

const router = new VueRouter({
    //history模式
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
route的tag属性

将route-link标签变成button：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/pageHome" tag="button">Home</router-link> |
      <router-link to="/about" tag="button">About</router-link>
      <!-- <button>显示主页</button>
      <button>显示about页面</button> -->
    </div>
    <router-view/>
  </div>
</template>
<style>
</style>

效果:

在这里插入图片描述

点击route，对应按钮变红色：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/pageHome" tag="button" active-class="changecolor">Home</router-link> |
      <router-link to="/about" tag="button" active-class="changecolor">About</router-link>
      <!-- <button>显示主页</button>
      <button>显示about页面</button> -->
    </div>
    <router-view/>

  </div>
</template>

<style>
  .changecolor{
    color:red;
  }

</style>

效果如下：

在这里插入图片描述

或者直接在route下面的index.js写：

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  activeClass: 'changecolor'
})
使用按钮替换route-link:
<template>
  <div id="app">
    <div id="nav">
      <!-- <router-link to="/pageHome" tag="button" active-class="changecolor">Home</router-link> |
      <router-link to="/about" tag="button" active-class="changecolor">About</router-link> -->
      <!-- <button>显示主页</button>
      <button>显示about页面</button> -->
      使用按钮来变化route
      <button @click="gohome">首页</button>
      <button @click="goabout">about</button>
    </div>
    <router-view/>

  </div>
</template>
<script>
export default {
    name: 'App'
    ,data:{

    }
    ,methods:{
        gohome(){
            this.$router.push("/pagehome");
        }
        ,goabout(){
            this.$router.push("/about");
        }
    }

}
</script>
<style>
  .changecolor{
    color:red;
  }

</style>

也就是说，使用写代码的方法，来变换组件视图,效果如下：

在这里插入图片描述

动态路由的使用

​ 什么是动态路由？ 假设我几个用户进入的页面参数是不一样的，那么此情况就是动态路由：

App.vue代码：

<template>
  <div id="app">
    <div id="nav">
      <!-- <router-link to="/pageHome" tag="button" active-class="changecolor">Home</router-link> |
      <router-link to="/about" tag="button" active-class="changecolor">About</router-link> -->
      <!-- <button>显示主页</button>
      <button>显示about页面</button> -->
      使用按钮来变化route
      <!-- <button @click="gohome">首页</button>
      <button @click="goabout">about</button> -->
      <router-link to="/pagehome">首页</router-link> 
      <router-link to="/about">关于</router-link> 
      <router-link :to="'/user/'+userid">用户界面</router-link> 
      <!-- <router-link>新组件</router-link>  -->
    </div>
    <router-view/>

  </div>
</template>
<script>
export default {
    name: 'App'
    ,data(){
      return {
        userid: 'zhangsan1'
      }
    }
}
</script>
<style>
  .changecolor{
    color:red;
  }
</style>

test.vue代码如下：

<template>
    <div>
        欢迎，这里是用户个人页面
        ,你好 : {{$route.params.userId}}
    </div>
</template>

<script>
    export default {        
        name: 'user'

    }
</script>

<style scoped>

</style>

目录一览：

在这里插入图片描述

从保存的cookie得知，账户为zhangsan,那么url显示张三:

在这里插入图片描述

认识路由的懒加载

所谓懒加载，就是用到时再加载、

在这里插入图片描述

使用例子：

  // {
  //   path: '/about',
  //   name: 'About',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   路由懒加载
  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  // }

完整使用：

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

// import Home from '../components/HelloWorld.vue'
// import about from '../components/about.vue'
// import user from '../components/test.vue'
//先使用 vue的uuse来使用vueroute
Vue.use(VueRouter)
//定义route路由
  const routes = [
    {
      path: '/',
      name:'first',
      redirect: '/pagehome'
    },
  {
    path: '/pagehome',
    name: '首页',
    component: () => import('../components/HelloWorld.vue')
  },
  // {
  //   path: '/about',
  //   name: 'About',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   路由懒加载
  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  // }
  {
    path: '/about',
    name: '关于',
    component: () => import('../components/about.vue')

  },
  {
    path: '/user/:userId',
    component: () => import('../components/test.vue')
  }
]
//history模式就是我们学的history的go，reward。pushState。replaceState啊等。
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  activeClass: 'changecolor'
})
//导出route组件
export default router

构建后，结果：

在这里插入图片描述

认识嵌套路由

在这里插入图片描述

使用：

  1. 创建子组件test2.vue,导出为

    <template >
    <div>
      <h1>嵌套路由的使用。。。我是about的子组件</h1>
      <ul>
        <li >A</li>
        <li >B</li>
        <li >C</li>
        <li >D</li>
      </ul>
    </div>  
</template>
<script>
export default {
  name: 'aboutSub',
}
</script>
<style  scoped>
        
</style>

  2. 路由定义

    import Vue from 'vue'
import VueRouter from 'vue-router'
// import Home from '../components/HelloWorld.vue'
// import about from '../components/about.vue'
// import user from '../components/test.vue'
//先使用 vue的uuse来使用vueroute
Vue.use(VueRouter)
//定义route路由
  const routes = [
    {
      path: '/',
      name:'first',
      redirect: '/pagehome'
    },
  {
    path: '/pagehome',
    name: '首页',
    component: () => import('../components/HelloWorld.vue')
  },
  // {
  //   path: '/about',
  //   name: 'About',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   路由懒加载
  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  // }
  {
    path: '/about',
    name: '关于',
    component: () => import('../components/about.vue'),
    children:[
      {
        path: 'aboutSub',
        component: () => import ('../components/test2.vue')
      }
    ]

  },
  {
    path: '/user/:userId',
    component: () => import('../components/test.vue')
  }
]
//history模式就是我们学的history的go，reward。pushState。replaceState啊等。
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
  activeClass: 'changecolor'
})
//导出route组件
export default router

  3. 在about组件中使用子组件

    <template>
  <div class="about">
      <h2>
          我是about页面...，我将使用子组件
      </h2>
      <router-link to="/about/aboutSub">显示路由嵌套的子组件</router-link>
      <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'about',
  props: {
    msg: String
  }
}
</script>
<style scoped>
</style>

  4. 在app.vue中定义路由about

    <template>
  <div id="app">
    <div id="nav">
      <!-- <router-link to="/pageHome" tag="button" active-class="changecolor">Home</router-link> |
      <router-link to="/about" tag="button" active-class="changecolor">About</router-link> -->
      <!-- <button>显示主页</button>
      <button>显示about页面</button> -->
      使用按钮来变化route
      <!-- <button @click="gohome">首页</button>
      <button @click="goabout">about</button> -->
      <!-- <router-link to="/pagehome">首页</router-link>  -->
      <router-link to="/about">关于</router-link> 
      <!-- <router-link :to="'/user/'+userid">用户界面</router-link>  -->
      <!-- <router-link>新组件</router-link>  -->
    </div>
    <router-view/>

  </div>
</template>
<script>
export default {
    name: 'App'
    ,data(){
      return {
        userid: 'zhangsan1'
      }
    }
}
</script>
<style>
  .changecolor{
    color:red;
  }
</style>

  5. 运行结果
    在这里插入图片描述

码农藏经阁
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
3.router安装使用
qq_36246016的博客
09-22 783
1.Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建页面应用变得易如反掌。 2.安装命令： npm install vue-router --save-dev 3.创建目录结构： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t8bILtOQ-1632314898238)(C:\Users\pjl\AppData\Roaming\Typora\typora-user-images\image-20210921205506637.p
$route.params.id是什么，与$route.query.id有什么区别？
weixin_40945354的博客
10-12 542
index.js { path: '/book/:id', component: Book } Book.vue <template> <div>图书ID：{{ $route.params.id }}</div> </template> <script> export default { } </script> App.vue <template> <p
linux路由表
yuezhilangniao的博客
12-10 195
[root@VM_139_74_centos ~]# route Kernel IP routing table Destination Gateway Genmask Flags Metric Ref Use Iface default gateway 0.0.0.0 UG 0 0 ...
Vue Router的安装与基本使用方法
最新发布
qq_40930841的博客
04-29 823
一、了解为何使用路由•具体使用示例：网易云音乐•单页面应用(SPA)：所有功能在一个html页面上实现•前端路由作用：实现业务场景切换（一个路由路径对应一个组件）•优点：整体不刷新页面，用户体验更好，数据传递容易，开发效率高。•缺点：首次加载（要加载所有的静态资源）会比较慢一点。1.vue-router模块yarn。
vue-router中history模式与hash模式的使用及比对
weixin_45821809的博客
04-05 1230
hash和history如果使用hash模式，一般无需特殊配置；但如果要使用history模式，则前端和服务端要做一定的设置；使用history模式通常本地调试没有什么问题，但是一旦发布到测试或生产环境，则会出现页面白屏或者刷新页面白屏的现象，这种问题的出现是因为前端和服务端没有做相应的配置。
Vue --- router，params和query传递参数并接收
qq_37823919的博客
09-16 3474
r o u t e r 为 V u e R o u t e r 实 例 ， 想 要 导 航 到 不 同 U R L ， 则 使 用 router为VueRouter实例，想要导航到不同URL，则使用router为VueRouter实例，想要导航到不同URL，则使用router.push方法。通过 params 传递参数，如果我们想获取 id 的参数值，可以通过 this.$route.params.id。通过路由属性配置传参我们可以用 this.$route.params.id 来获取到 id 的值。
vue路由插件之vue-route
10-16
主要介绍了vue路由插件之vue-route的相关知识，本文通过实例代码给大家介绍了vue router的使用，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue路由对象属性 .meta $route.matched详解
12-13
$route.fullPath 1 路由是：/path/:type真正路径是：/path/list 2 path匹配路径: /path/list 3 fullPath匹配路由: /path/:type 路由元信息 .meta const router = new VueRouter({ routes: [ { path: '/foo', ...
解决vue路由name同名,路由重复的问题
10-15
主要介绍了解决vue路由name同名,路由重复的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
学习记录500@vue路由简单使用
教练我想学编程
12-07 377
main.js //引入Vue import Vue from 'vue' //引入App import App from './App.vue' //引入VueRouter import VueRouter from 'vue-router' //引入路由器 import router from './router' //关闭Vue的生产提示 Vue.config.productionTip = false //应用插件 Vue.use(VueRouter) //创建vm new Vue({ el.
vue2进阶篇：vue-router之路由的params参数
刘大猫
07-09 7562
vue2进阶篇：vue-router之路由的params参数
【备忘录】从头搭建VUE项目，配置ROUTE路由，并使用AXIOS跨域访问后端
Xcong_Zhu的博客
11-18 2620
学习笔记整理
Vue router传递参数的方式(简单使用)
松烟入墨
11-08 839
params 传参 router.js ... { path: "/user/:id", // path后面要加上参数 name: "user", // name是必须的 component: () =&gt; import("../views/User") //懒加载组件 } ... User.vue //组件中 &lt;router-link to="/user...
vue-router 动态路由/xxx/:id-$route.params.id
caoxinjian423的博客
10-06 4704
router/index.js import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import Test from '../views/Test.vue'; Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, {
VUE路由下 mode:‘history‘, base:process.env.BASE_URL的作用
热门推荐
qq_42898184的博客
07-15 1万+
VUE路由下 mode:‘history’, base:process.env.BASE_URL的作用 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 例如： histroy: localhost:8080/user/list hash:
Vue路由详细安装使用方法，脚手架安装使用方法
z27566的博客
10-11 2031
一个网站的所有页面都继承在一个html的文件里面通过切换div模拟页面的切换1，资源公用2，前后端分离3，页面切换流畅1，对搜索SEO引擎不友好地址改变，不刷新页面，监听地址栏变化实现页面局部更新锚点（hash）变化不会刷新页面；H5新增特性。
linux route命令
韩帅平的博客
06-11 3435
考试题一：linux下如何添加路由(百度面试题) 以上是原题，老男孩老师翻译成如下3道题。 a.如何用命令行方式给linux机器添加一个默认网关，假设网关地址为10.0.0.254？b. 192.168.1.0网段， 192.168.1.1网关的某一服务器想连入172.16.1.0/24段,该如何添加路由（奇虎360）c.如果添加一个主机路由？请分别解答。解答：route -net 172.16....
linux 下route命令
Jonathan158的专栏
02-01 1776
http://blog.csdn.net/duobaohongtu3/article/details/39375459
vue3中使用route创建多个路由
06-09
在Vue3中，你可以使用Vue Router的`createRouter`函数来创建多个路由。以下是一个例子： ```javascript import { createRouter, createWebHashHistory } from 'vue-router' const routes1 = [ // 第一个路由的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值