耀极客论坛

 找回密码
 立即注册
查看: 495|回复: 0

Vue学习-VueRouter路由基础

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-8 02:18:15 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了Vue学习-VueRouter路由基础,路由本质上就是超链接,xiamian 文章围绕VueRouter路由的相关资料展开详细内容,需要的小伙伴可以参考一下,希望对你的学习有所帮助

一、VueRouter

1、说明
  用 Vue.js + Vue Router 创建单页应用,感觉很自然:使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 Vue Router 添加进来,我们需要做的是,将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们。路由本质上就是超链接。

2、选中路由的渲染:
  (1)、router-link-exact-active类
  当路由到哪里时,该类名就添加到对应的路由标签上。
比如:当点击About时,路由就跳转到About对应的页面
  (2)、router-link-active类
  路由中,子路由的path设置(比如:http://localhost/home)包含了父路由的path设置(比如:http://localhost/),那么点击子路由的时候,给子路由添加router-link-active类时,父路由也有router-link-active类。也就是当点击(http://localhost/home)路由后,两个路由都有被选中的效果。

3、基本工作原理

  在vue中的html部分引入router-link(与a原理类似),to属性就是要跳转的vue组件,而router-view就负责展现当前路由所指向的内容,使得单页面也能达到页面跳转的效果!

二、实战

1、创建一个带router的vue项目


2、打开项目中的src/router/index.js文件
  可以看到项目已经自动生成了两个路由,一个是主页home,一个是about界面。路径分别为 '/' 和 '/about' 。

  打开根目录的main.js,可以看到在main.js引入了路由,所以在所有组件中都可以使用路由了。


3、在浏览器中打开项目
  可以看到Home和About两个路由导航。


4、新建路由
  写一个类似淘宝的路由导航,包括:主页、消息、购物车和我的四部分。
  新建四个vue文件,对应四个路由。

  配置路由index.js文件
  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3. import Home from '../views/Home.vue'
  4. Vue.use(VueRouter)
  5. const routes = [
  6.   {
  7.     path: '/',
  8.     name: 'Home',
  9.     component: Home
  10.   },
  11.   {
  12.     path: '/message',
  13.     name: 'Message',
  14.     component: () => import(/* webpackChunkName: "about" */ '../views/Message.vue')
  15.   },
  16.   {
  17.     path: '/goodcar',
  18.     name: 'GoodCar',
  19.     component: () => import(/* webpackChunkName: "about" */ '../views/GoodCar.vue')
  20.   },
  21.   {
  22.     path: '/me',
  23.     name: 'Me',
  24.     component: () => import(/* webpackChunkName: "about" */ '../views/Me.vue')
  25.   }
  26. ]
  27. const router = new VueRouter({
  28.   routes
  29. })
  30. export default router
复制代码
  在App.vue中配置导航栏
  1. ‹template>
  2.   ‹div id="app">
  3.     ‹div id="nav">
  4.       ‹router-link to="/">主页‹/router-link>
  5.       ‹router-link to="/message">消息‹/router-link>
  6.       ‹router-link to="/goodcar">购物车‹/router-link>
  7.       ‹router-link to="/me">我的‹/router-link>
  8.     ‹/div>
  9.     ‹router-view/>
  10.   ‹/div>
  11. ‹/template>
  12. ‹style>
  13. #app {
  14.   font-family: Avenir, Helvetica, Arial, sans-serif;
  15.   -webkit-font-smoothing: antialiased;
  16.   -moz-osx-font-smoothing: grayscale;
  17.   text-align: center;
  18.   color: #2c3e50;
  19. }
  20. #nav {
  21.   padding: 30px;
  22.   margin: 0 auto;
  23.   width: 30%;
  24.   display: flex;
  25.   justify-content: space-around;
  26. }
  27. #nav a {
  28.   font-weight: bold;
  29.   color: #2c3e50;
  30.   text-decoration: none;
  31. }
  32. #nav a.router-link-exact-active {
  33.   color: #42b983;
  34. }
  35. ‹/style>
复制代码
  结果:

  这样我们就了解了路由的基本概念及其配置以及它的功能。
  到此这篇关于Vue学习-VueRouter路由基础的文章就介绍到这了,更多相关VueRouter路由基础内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 04:25 , Processed in 0.066102 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表