五、VUE学习笔记 5 | 进阶 Vue CLI---路由

最新推荐文章于 2024-06-13 15:50:45 发布
最新推荐文章于 2024-06-13 15:50:45 发布
阅读量310 收藏
点赞数
分类专栏： VUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40703303/article/details/94402950
版权

目录

1、安装

路由组件的设定-仅两步

2、第一个例子

3、动态路由

4、嵌套路由

5、路由拼图

6、重定向及别名

7、多参数路由

1、安装

VUE CLI可以选择安装，如果没有安装则运行以下命令

$ npm install vue-router --save --save-exact

 

路由组件的设定-仅两步

1、src/router/index.js  --- 路由的配置文件，做组件映射

import Vue from 'vue'
import Router from 'vue-router'  
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router) //将路由组件注册到全局区
//输出类，定义各种URL映射
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld //这里HelloWorld是第三行导入的组件
    }
  ]
})

 2、src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import 'bootstrap/dist/css/bootstrap.min.css'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,//将router里的index.js在VUE中进行注册
  components: { App },
  template: '<App/>'
})

2、第一个例子

做一个简单的路由

涉及文件：

* HelloWorld.vue
* News.vue
* About.vue
* router/index.js
* App.vue

 

### HelloWorld.vue

<template>
    <div>
        <h1>Hello World!</h1>
    </div>
</template>

### News.vue

<template>
    <div>
        <h1>News Page</h1>
    </div>
</template>

### About.vue
 

<template>
    <div>
        <h1>About Page</h1>
    </div>
</template>


### router/index.js

添加路由

当URL是根URL /，绑定组件HelloWorld；

当URL是/about，绑定组件About


import About from '@/components/About'
import News from '@/components/News'
...
    {
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
    },
    {
        path: '/about',
        name: 'About',
        component: About
    },
    {
        path: '/news',
        name: 'News',
        component: News
    }
 

import Vue from 'vue'
import Router from 'vue-router'  
import HelloWorld from '@/components/HelloWorld'
import News from '@/components/News'
import About from '@/components/About'
Vue.use(Router) //将路由组件注册到全局区
//输出类，定义各种URL映射
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld //这里HelloWorld是第三行导入的组件
    },
    {
      path: '/news',
      name: 'News',
      component: News 
    },
    {
      path: '/about',
      name: 'About',
      component: About 
    }
  ]
})

### App.vue

 <router-link to="URL"></router-link> 这里的（/、/news、/about在index.js中进行了路由映射）实际效果是在页面渲染出页面链接，渲染到 <router-view/>中进行显示

<template>
  <div id="app">
     <img src="./assets/logo.png">
        <p>
            <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/">Home</router-link>
            <router-link to="/news">新闻</router-link>
            <router-link to="/about">关于</router-link>
        </p>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view/>
  </div>
</template>

<script>
import './assets/my.css'
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;
}
</style>

3、动态路由

动态路由是指在URL路径中含有动态参数的路由，比如说：/player/1, /player/2, /player/3等等。同一个组件，传的参数不同，显示的内容不同

## 实战演习

定制玩家的动态路径：/player/:id

* Player.vue
* router/index.js
* App.vue

 

### Player.vue
 

<template>
    <div>
        <h1>球员页面</h1>
        <p>{{ detail }}</p>
    </div>
</template>

<script>
    export default {
        name: "Player",
        data() {
            return {
                detail: {}
            };
        },
        mounted() {
            //当组件初始化完成时
            // 接受url参数id
            this.detail = this.getPlayer(this.$route.params.uid);
        },
        
        beforeRouteUpdate(to, from, next) {
            //当从非首页点击其他路由时，重新设置detail的信息
            //关于此处详细原因 视频地址：https://www.bilibili.com/video/av24419291/?p=12
            this.detail = this.getPlayer(to.params.uid);
            next();
        },
        
        methods: {
            getPlayer(uid) {
                switch (uid) {
                    case '1':
                        return {uid: 1,name: '库里',point: 26};
                    case '2':
                        return {uid: 2,name: '哈登',point: 30};
                    default:
                        return {uid: -1};
                }
            }
        }
    };
</script>

 

### router/index.js

加入以下内容


...
import Player from '@/components/Player'
...
export default new Router({
    routes: [
        {
            path: '/player/:uid',
            name: 'Player',
            component: Player
        }
    ]
})
 

通过URL把参数传给mounted，然后再通过getPlayer()的switch 进行判断

 

### App.vue

添加以下内容

<template>
    <div id="app">
        <p>
            <router-link to="/">Home</router-link>
            <router-link to="/player/1">库里</router-link>
            <router-link to="/player/2">哈登</router-link>
        </p>
        <router-view/>
    </div>
</template>

 

结合上一张图看 

结果

4、嵌套路由

嵌套路由是指在动态路由的基础上再加上附加的嵌套URL（即：组件），比如说：(/player/:uid/*)/player/1/profile, /player/1/stats等。表示球员1的简介信息、数据。

 

这里是要在球员组件里添加球员信息和球员数据的子路由

## 实战演习

* Player/Profile.vue
* Player/Stats.vue
* router/index.js
* Player.vue

### Player/Profile.vue

<template>
    <div>
        <h2>球员简介:{{$route.params.uid}}</h2>
    </div>
</template>

### Player/Stats.vue

<template>
    <div>
        <h2>球员数据:{{$route.params.uid}}</h2>
    </div>
</template>

### router/index.js

import Vue from 'vue'
import Router from 'vue-router'  
import HelloWorld from '@/components/HelloWorld'
import Player from '@/components/Player'
import PlayerProfile from '@/components/Player/Profile'
import PlayerStats from '@/components/Player/Stats'
Vue.use(Router) //将路由组件注册到全局区
//输出类，定义各种URL映射
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld //这里HelloWorld是第三行导入的组件
    },
    {
      path: '/player/:uid',
      name: 'Player',
      component: Player,
      children:[
        {
          path:'profile',
          component:PlayerProfile
        },
        {
          path:'stats',
          component:PlayerStats
        }
      ]
  },
  
  ]
})

### Player.vue

<template>
    <div>
        <h1>球员页面</h1>
        <ul>
            <li>编号:{{detail.uid}}</li>
            <li>名字:{{detail.name}}</li>
            <li>得分:{{detail.point}}</li>
        </ul>
        <!-- 当点击profile、stats时，组件会自动渲染到<router-view>中 -->
        <router-link :to="profile">简介</router-link>
         <router-link :to="stats">数据</router-link>
         <hr>
         <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "Player",
        data() {
            return {
                detail: {},
                profile:'',
                stats:''
            };
        },
        mounted() {
            //当组件初始化完成时
            // 接受url参数id
            this.detail = this.getPlayer(this.$route.params.uid);
            this.profile = '/player/'+this.$route.params.uid+'/profile';
            this.stats = '/player/'+this.$route.params.uid+'/stats';
       },
        
        beforeRouteUpdate(to, from, next) {
            this.detail = this.getPlayer(to.params.uid);
            this.profile='/player/'+to.params.uid+'/profile';
            this.stats = '/player/'+to.params.uid+'/stats';
            next();
        },
        
        methods: {
            getPlayer(uid) {
                switch (uid) {
                    case '1':
                        return {uid: 1,name: '库里',point: 26};
                    case '2':
                        return {uid: 2,name: '哈登',point: 30};
                    default:
                        return {uid: -1};
                }
            }
        }
    };
</script>


 

结果

5、路由拼图

为一个路由(画面)组合多个组件，完成整个页面。

* router-view[name]
* components

## 实战演习

* Header.vue
* Sidebar.vue
* Detail.vue
* router/index.js
* App.vue

 

### setting/Header.vue
 

<template>
    <div>
        <h1>标题栏</h1>
        <div>欢迎来到小马Vue.js课程系列</div>
    </div>
</template>

### setting/Sidebar.vue

<template>
    <div>
        <h1>边条</h1>
    </div>
</template>

### setting/Detail.vue

<template>
    <div>
        <h1>详细显示</h1>
        <p>Vue.js是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</p>
    </div>
</template>

### router/index.js

import Vue from 'vue'
import Router from 'vue-router'  
import SettingDetail from '@/components/setting/Detail'
import SettingHeader from '@/components/setting/Header'
import SettingSidebar from '@/components/setting/Sidebar'
Vue.use(Router) //将路由组件注册到全局区
//输出类，定义各种URL映射
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      components: {
        myHeader: SettingHeader,
        mySidebar: SettingSidebar,
        myDetail: SettingDetail
    }
    }
  ]
})

 ### App.vue

<template>
    <div id="app">
        <table width="100%">
            <tr>
                <td colspan="2" style="background-color:darkgoldenrod">
                    <router-view name="myHeader"></router-view>
                </td>
            </tr>
            <tr>
                <td width="20%" style="background-color:thistle">
                    <router-view name="mySidebar"></router-view>
                </td>
                <td width="80%" style="background-color:aquamarine">
                    <router-view name="myDetail"></router-view>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
import "./assets/my.css";
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;
}
</style>

结果

6、重定向及别名

* 重定向指令：redirect
* 路由别名：alias

## 实战演习

* About.vue
* router/index.js
* App.vue

### About.vue

<template>
    <div>
        <h1>About Page</h1>
    </div>
</template>

### router/index.js
 

import Vue from 'vue'
import Router from 'vue-router'  
import SettingDetail from '@/components/setting/Detail'
import SettingHeader from '@/components/setting/Header'
import SettingSidebar from '@/components/setting/Sidebar'
import Player from '@/components/Player'
import PlayerProfile from '@/components/Player/Profile'
import PlayerStats from '@/components/Player/Stats'
import About from '@/components/About'
Vue.use(Router) //将路由组件注册到全局区
//输出类，定义各种URL映射
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      components: {
        myHeader: SettingHeader,
        mySidebar: SettingSidebar,
        myDetail: SettingDetail
    }
    },
    {
      path: '/player/:uid',
      name: 'Player',
      component: Player,
      children:[  
        {
          path:'profile',
          component:PlayerProfile
        },
        {
          path:'stats',
          component:PlayerStats
        }
      ]
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    alias: '/aboutme' //输入/aboutme或/about 都访问同样的页面/about
},
{
    path: '/curry',//输入/curry就能重定向到/player/1
    redirect: '/player/1'
    //redirect: { name: 'About' } //重定向到About组件
    //redirect: '/about'
}
  ]
})

### App.vue

<template>
    <div id="app">
        <router-link to="/">Home</router-link>
        <router-link to="/aboutme">About</router-link>
        <router-link to="/player/1">Player1</router-link>
        <router-link to="/curry">Curry</router-link>
        <hr>
        <router-view></router-view>
    </div>
</template>
<script>
import "./assets/my.css";
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;
}
</style>

7、多参数路由

## 知识点

* 路由属性props

## 实战演习

* User.vue
* router/index.js
* App.vue

 

### User.vue

<template>
    <div>
        <h1>User</h1>
        <p>uid={{ uid }}, {{ nationality }}</p>
        <p>$route.params.uid={{ $route.params.uid }}</p>
        <p>$route.params.uid={{ $route.params.nationality }}</p>
    </div>
</template>

<script>
    export default {
        name: "User",
        props: ['uid', 'nationality']
    };
</script>

### router/index.js

import Vue from 'vue'
import Router from 'vue-router'  
import User from '@/components/User'
Vue.use(Router) //将路由组件注册到全局区
//输出类，定义各种URL映射
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
    },
    {
      path: '/user/:uid/:nationality',
      name: 'User',
      component: User,
      props: true
  }
  ]
})

### App.vue

<template>
    <div id="app">
        <router-link to="/">Home</router-link>
        <router-link to="/user/1/usa">User1</router-link>
        <router-link to="/user/2/china">User2</router-link>
        <router-link to="/user/3/korea">User3</router-link>
        <hr>
        <router-view></router-view>
    </div>
</template>
<script>
import "./assets/my.css";
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;
}
</style>

结果

shawn_jing128
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli5.x 安装 cesium
qq_37312180的博客
03-06 829
【代码】vue-cli5.x 安装 cesium。
vue3+vue-cli实现动态路由
qq_48666244的博客
02-06 400
编写一个路由配置表，不同的URL对应不同的组件。提供一个路由占位，用来挂载URL匹配到的组件。MyProfile组件。
Vue-CLI 4 搭建Vue项目
God-Excious的博客
09-21 3017
文章目录一、Node.js安装二、Vue-Cli安装三、Vue项目创建1、项目创建2、项目依赖导入2.1 vue-router（路由）3、项目配置3.1 router.js（路由配置）4、测试效果 一、Node.js安装 到Node.js官网（https://nodejs.org/zh-cn/）上，下载并安装Node.js，选择【长期维护版】即可 使用安装包安装，选择安装路径可以根据自己的需要改一下（比如我安装在了D:\Environment\nodejs\目录下）。 这个Necessary Tools
【前端】webpack3-vue2项目升级为vue-cli5项目，非必要不升，要升就直接rspack吧
最新发布
2301_76933862的博客
06-13 234
尝试把一个webpack3-vue2项目升级为vue-cli5项目， 本以为提升很大，速度能减半，结果看着也不咋滴。总结：非必要不升。
vue-cli更新至5.x初体验
weixin_43090018的博客
02-24 1万+
前序 早上刚到公司，打开浏览器准备开始学（摸）习（鱼），看到GitHub来了个通知，vue-cli已经升级至5.0.1的版本了，好奇的点进去看了下 官方文档说底层已经使用上webpack5了，看样子还不错（但我还是喜欢vite~~）；node-sass也弃用了 更多重大变更请查看官方文档的说明：vue-cli5重大变更说明 升级至最新版 这还等什么，赶快去体验一下吧 首先打开终端执行npm uninstall @vue/cli -g卸载掉4.x的版本（mac版本的需要加上sudo） 接着执行.
vue2+vite+vue-cli5 实现vite开发webpack打包
JokerSoulClub的博客
09-30 3643
主要是因为即想要得到vite的高效开发模式（免编译）但是最后又想要兼容到IE9（ps，vite自带插件最多IE11而且打包出两份代码）
Vue学习笔记进阶篇之vue-router安装及使用方法
12-03
Vue Router 是 Vue.js 的官方路由管理器，它与 Vue.js 深度集成，使得构建单页面应用（SPA）变得更加简单。Vue Router 提供了基于路径的导航守卫、动态路由匹配、命名视图等特性，让应用中的路由管理变得灵活且高效...
vue学习笔记，学习vue从0-1的步骤
09-21
5. **环境搭建**：开始Vue开发前，需要安装Node.js，Vue的命令行工具vue-cli，以及可能的代码编辑器如Visual Studio Code (VSCode)。`vue-cli`是一个脚手架工具，可以快速初始化项目结构，包括配置Webpack和Babel等...
Vue.js第二天学习笔记（vue-router）
11-28
本篇学习笔记主要介绍如何在Vue项目中配置和使用`vue-router`。 首先，确保已经通过npm安装了必要的依赖包，包括`vue`, `vue-router`和`vue-resource`。在终端运行以下命令： ```bash npm install vue vue-router ...
03-vuecli3.rar
11-06
Vue CLI 3 是一个强大的命令行工具，用于快速搭建 Vue.js 项目。它极大地简化了 Vue.js 应用程序的初始设置，提供了丰富的插件生态...学习 Vue CLI 3 的相关笔记将有助于深入理解这些概念，并有效地应用于项目开发中。
vue 3 学习笔记 vue3 vue3学习笔记
10-18
Vue 3 学习笔记 本文是关于 Vue 3 的学习笔记，涵盖了 Vue 3 的基础知识点，包括 Setup、Reactive、Ref、计算属性、Watch、生命周期函数、父子组件通信、Hook 等。 一、Setup Setup 是 Vue 3 中的组合式 API 的...
vue-cli5脚手架搭建项目过程详解 -vue组件单元测试
前端打杂师
08-03 1605
单元测试是对软件中的最小可测试单元进行测试。（最小可测试单元是要有结果产出的。例如某个方法，单独的某个操作）单元测试其实是伴随着敏捷开发，它是对更快开发的一种追求。早发现错误比晚发现错误会更好，保证自己的代码符合要求一: 搭建基于 jest 的 vue 单元测试环境 零配置开箱即用二: 使用 vue-test-util 提高测试编码效率。...
vue-cli5.0脚手架的安装搭建和运行
qq_60334912的博客
08-19 1898
vue脚手架安装
vue-cli4升级到vue-cli5的踩坑记录
云帆的博客
07-31 841
可能是由于vue-cli5升级了css-loader导致的问题。修改vue.config.js配置文件的css配置。在样式文件中使用静态资源路径导致编译无法通过。
vue基础精讲组件/路由/vuecli4
05-08
主要讲了vue的各种基础语法知识vue组件  组件的通信vue指令 使用vue动画过渡后台api请求 axios使用vuecli4安装使用vue-router路由安装使用
vuecli4升级到vuecli5踩坑记录
chunru_liu的博客
03-30 1万+
项目以来的module版本很新，用到了es2020的语法，在vuecli4版本上死活编译不成功，升级5后解决，这个过程中在配置vue.config.js中遇到了很多问题，记录下来或许能给其他人提供帮助~ vuecli官网英文已经更新为最新的cli5但中文还停留在cli4，导致我最开始在查资料时一直没有查到官方资料，后来偶然间切换英文才发现。 1.配置scss，pretendData变为additionalData 2.启用css moudles 这个vuecli官网也有记录Working wi.
vue创建动态路由的两种方式（超详细哦）
wangweiruning的博客
07-13 4681
vue创建动态路由的两种方式（超详细哦）
Vue.js 中的动态路由
未思
03-12 2万+
在文章 使用vue-router完成简单导航功能 中实现的路由导航功能是不能传递参数的，也就是说是静态路由。 而能传递参数的路由模式，由于可以传递参数，所以其对应的路由数量是不确定的，故称之为 动态路由 那么如何将参数作为路由呢？ 在参数名前面加上 : ，然后将参数写在路由的 path 内 如下示例： routes: [ //将页面组件与path指令的路由关联 ...
Vue-cli3如何添加路由（router）
热门推荐
邓占勇的博客
01-17 2万+
之前使用的vue-cli2的是否可以在创建项目时直接引入vue-router，但是现在Vue-cli3新建项目后却少了很多东西，我们需要自己来安装使用路由。具体方案如下： 安装路由 npm install vue-router 创建router.js与mian.js同级 router.js中的内容为 import Vue from 'vue' import Router from...
vue-cli3项目搭建与优化全攻略
"vue-cli3 从搭建到优化的详细步骤" 在本文中，我们将深入探讨如何使用vue-cli3从零开始搭建一个Vue.js项目，并逐步对其进行优化。Vue CLI 3 是 Vue.js 官方提供的一个命令行工具，它极大地简化了 Vue 项目的初始化...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值