vue-router

最新推荐文章于 2023-06-17 00:14:34 发布
最新推荐文章于 2023-06-17 00:14:34 发布
阅读量294 收藏
点赞数
分类专栏： Web前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25371579/article/details/78476971
版权

vue-router

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用
vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来

传统的页面应用，是用一些超链接来实现页面切换和跳转的
在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换

单页面应用示例

这个单页面应用有两个路径
/home
和
/about

All text

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="../src/assets/logo.png" />
        <link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.css" type="text/css"/>
        <link rel="stylesheet" href="../src/assets/css/style.css" type="text/css"/>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <title>vue-router之所有代码耦合在HTML页面</title>
    </head>
    <body>
        <div id="app">
            <div class="row">
              <div class="col-xs-offset-2 col-xs-8">
                <div class="page-header">
                  <h2>Router Basic - 01</h2>
                </div>
              </div>
            </div>
            <div class="row">
                <div class="col-xs-2 col-xs-offset-2">
                  <div class="list-group">
                    <!-- 使用 router-link 组件来导航. -->
                    <!-- 通过传入 `to` 属性指定链接. -->
                    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
                    <router-link class="list-group-item" to="/home">Home</router-link>
                    <router-link class="list-group-item" to="/about">About</router-link>
                  </div>
                </div>
                <div class="col-xs-6">
                  <div class="panel">
                    <div class="panel-body">
                      <!--用于渲染匹配的组件-->
                      <router-view></router-view>
                    </div>
                  </div>
                </div>
            </div>
        </div>
        <template id="home">
                <div>
                    <h1>Home</h1>
                    <p>{{msg}}</p>
                </div>
            </template>
            <template id="about">
                <div>
                    <h1>About</h1>
                    <p>This is the tutorial about vue-router.</p>
                </div>
            </template>
    </body>
    <script>
        // 0. 如果使用模块化机制编程， 要调用 Vue.use(VueRouter)
        // 如果使用全局的 script 标签，则无须如此（手动安装）

        // 1. 定义（路由）组件。
        // 可以从其他文件 import 进来
        // const home = { template: '#home' }
        // const about = { template: '#about' }

        var home = Vue.extend({
            template:'#home',
            data: function() {
                    return {
                        msg: 'Hello, vue router!'
                    }
                }
        })

        var about = Vue.extend({
            template:'#about'
        })

        // 2. 定义路由
        // 每个路由应该映射一个组件。 其中"component" 可以是
        // 通过 Vue.extend() 创建的组件构造器，
        // 或者，只是一个组件配置对象。
        // 我们晚点在讨论嵌套路由。
        const routes = [
          { path: '/home', component: home },
          { path: '/about', component: about }
        ]

        // 3. 创建 router 实例，然后传 `routes` 配置
        // 你还可以传别的配置参数, 不过先这么简单着吧。
        const router = new VueRouter({
          routes // （缩写）相当于 routes: routes
        })

        // 4. 创建和挂载根实例。
        // 记得要通过 router 配置参数注入路由，
        // 从而让整个应用都有路由功能
        const app = new Vue({
          router
        }).$mount('#app')

        // 现在，应用已经启动了！
    </script>
</html>

运行示例

All text

嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成
同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件
/user/foo/profile                     /user/foo/posts
+------------------+                  +-----------------+
| User             |                  | User            |
| +--------------+ |                  | +-------------+ |
| | Profile      | |  +------------>  | | Posts       | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

All text

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="../src/assets/logo.png" />
        <link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.css" type="text/css"/>
        <link rel="stylesheet" href="../src/assets/css/style.css" type="text/css"/>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <title>vue-router之嵌套路由</title>
    </head>
    <body>
        <div id="app">
            <div class="row">
              <div class="col-xs-offset-2 col-xs-8">
                <div class="page-header">
                  <h2>Router Basic - 02</h2>
                </div>
              </div>
            </div>
            <div class="row">
                <div class="col-xs-2 col-xs-offset-2">
                  <div class="list-group">
                    <!-- 使用 router-link 组件来导航. -->
                    <!-- 通过传入 `to` 属性指定链接. -->
                    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
                    <router-link class="list-group-item" to="/home">Home</router-link>
                    <router-link class="list-group-item" to="/about">About</router-link>
                    <router-link class="list-group-item" to="/user/router1">User/router1</router-link>
                    <router-link class="list-group-item" to="/user/router1/profile">User/router1/profile</router-link>
                    <router-link class="list-group-item" to="/user/router1/posts">User/router1/posts</router-link>
                    <router-link class="list-group-item" to="/user/router2">User/router2</router-link>
                    <router-link class="list-group-item" to="/user/router2/profile">User/router2/profile</router-link>
                    <router-link class="list-group-item" to="/user/router2/posts">User/router2/posts</router-link>
                  </div>
                </div>
                <div class="col-xs-6">
                  <div class="panel">
                    <div class="panel-body">
                      <!--用于渲染匹配的组件-->
                      <router-view></router-view>
                    </div>
                  </div>
                </div>
            </div>
        </div>
        <template id="home">
                <div>
                    <h1>Home</h1>
                    <p>{{msg}}</p>
                </div>
            </template>
            <template id="about">
                <div>
                    <h1>About</h1>
                    <p>This is the tutorial about vue-router.</p>
                </div>
            </template>
        <template id="user">
                <div>
                    <h1>User {{ $route.params.id }}</h1>
            <!--用于渲染匹配的组件-->
            <router-view></router-view>
                </div>
            </template>
    </body>
    <script>
        // 0. 如果使用模块化机制编程， 要调用 Vue.use(VueRouter)
        // 如果使用全局的 script 标签，则无须如此（手动安装）

        // 1. 定义（路由）组件。
        // 可以从其他文件 import 进来
        // const home = { template: '#home' }
        // const about = { template: '#about' }

        var Home = Vue.extend({
            template:'#home',
            data: function() {
                    return {
                        msg: 'Hello, vue router!'
                    }
                }
        })

        var About = Vue.extend({
            template:'#about'
        })

        var User = Vue.extend({
          template: '#user',
          data: function(){
            return {
              id : '{{ $route.params.id }}'
            }
          }
        })

        const UserHome = { template: '<div>This is Home</div>' }
        const UserProfile = { template: '<div>This is Profile</div>' }
        const UserPosts = { template: '<div>This is Posts</div>' }


        // 2. 定义路由
        // 每个路由应该映射一个组件。 其中"component" 可以是
        // 通过 Vue.extend() 创建的组件构造器，
        // 或者，只是一个组件配置对象。
        // 我们晚点在讨论嵌套路由。
        const routes = [
          { path: '/home', component: Home },
          { path: '/about', component: About },
          { path: '/user/:id', component: User,
          children: [
            // UserHome will be rendered inside User's <router-view>
            // when /user/:id is matched
            { path: '', component: UserHome },

            // UserProfile will be rendered inside User's <router-view>
            // when /user/:id/profile is matched
            { path: 'profile', component: UserProfile },

            // UserPosts will be rendered inside User's <router-view>
            // when /user/:id/posts is matched
            { path: 'posts', component: UserPosts }
          ]
          }
        ]

        // 3. 创建 router 实例，然后传 `routes` 配置
        // 你还可以传别的配置参数, 不过先这么简单着吧。
        const router = new VueRouter({
          routes // （缩写）相当于 routes: routes
        })

        // 4. 创建和挂载根实例。
        // 记得要通过 router 配置参数注入路由，
        // 从而让整个应用都有路由功能
        const app = new Vue({
          router
        }).$mount('#app')

        // 现在，应用已经启动了！
    </script>
</html>

All text

编程式导航

router.push(location)

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录

所以，当用户点击浏览器后退按钮时，则回到之前的 URL
当你点击 <router-link> 时，这个方法会在内部调用

所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)
// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
MatrixSparse
关注
专栏目录
Vue首页加载速度优化
haojie6091的博客
08-14 1万+
Vue首页加载速度优化 问题描述 最近在搭建自己的博客，前端采用Vue技术，发现首页加载速度非常之慢，常常达到10S左右。虽然作为一个Java开发者，对前端技术不是特别了解，但是也实在无法忍受如此之慢的打开网页速度，遂开始优化之旅。 寻找原因 游览器的分析结果：vendor.xxxxx.js体积过于庞大，此文件为第三方插件库。 查找打包数据，发现该文件在打包时变提示体积过大【big】 ...
vue-router总结
weixin_47450807的博客
02-20 4513
一、前言 本篇博客主要是总结一下vue-router，将总结一下vue-router中的常用的api。 二、认识前端路由 路由其实是网络工程中的一个术语，在架构一个网络时，非常重要的两个设别是路由器和交换机。当然，目前在我们生活中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器,事实上，路由器主要维护的是一个映射表，映射表会决定数据的流向。 路由的概念在软件工程中出现，最早是在后端路由中实现的，原因是web的发展主要经历了这样一些阶段：后端路由阶段，前后端分离阶段，单页面复应用(SPA)阶段。 一
Vue基础知识总结 11：前端路由vue-router
学Java，找哪吒
10-13 4万+
当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能吧不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
vue-router 详解
热门推荐
星海IT学习之路
01-16 12万+
文章目录1、认识vue-router2、安装和使用vue-router 1、认识vue-router 目前前端流行的三大框架，都有自己的路由实现： Angular的ngRouter React的ReactRouter Vue的vue-router vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。 我们可以访问其官方网站对其进行学习：https://router.vuejs.org/zh/ vue-router是基于路由和组件的 路由用户设定访问
vue-router 路由超详细教程
weixin_47124112的博客
09-06 4万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
VUE-CLI/VUE-ROUTER
LKS_010620的博客
08-24 4033
官方文档vue-cli是vue官方出品的快速构建单页应用的脚手架，里面集成了webpack，npm，nodejs，babel，vue，vue-router。
vue3 vue-router使用详解
蓑笠翁
06-17 1万+
vue3引入router详解，vue3+typescript使用Vue-Router包详解。
vue3:vue-router路由的使用
米儿的博客
08-04 3万+
目前前端流行的三大框架, 都有自己的路由实现: Angular的ngRouter React的ReactRouter Vue的vue-router Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得非常容易。 目前Vue路由最新的版本是4.x版本。 vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起...
vue-router传参的四种方式超详细
前端开发工程师
06-21 4万+
工作中遇到的vue路由传参的四种方式
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统
06-14
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统 项目经过严格测试，确保可以运行！ 基于 Spring Boot 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、...
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
vue-router-sitemap通过vue-router配置安装npm i --save vue-router-sitemap示例用法// router.js import VueRout vue-router-sitemap通过vue-router配置生成sitemap.xml安装npm我-保存vue-router-sitemap示例用法//...
基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目
06-15
基于Vue+Vue-Router+Vuex+Element-ui+axios，高仿小米商城，实现的电商项目。本项目前后端分离，前端基于Vue+Vue-router+Vuex+Element-ui+Axios，参考小米商城实现。后端基于Node.js(Koa框架)+Mysql实现。前端包含了...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
管理系统系列--Vue2.0+Vue-router+ElementUI实现的后台管理系统模板.zip
最新发布
02-25
【标题】：“管理系统系列--Vue2.0+Vue-router+ElementUI实现的后台管理系统模板”是一个基于现代前端技术栈构建的后台管理应用框架。这个框架使用了Vue.js的2.0版本，Vue-router进行页面路由管理和ElementUI作为...
vue-component
爱偷吃香蕉的萌猴子
11-08 1万+
vue-componentvue组件简介组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树 什么是组件 组件可以扩展HTML元素，封装可重用的HTML代码，可以将组件看作自定义的HTML元素。组件的创建和注册基本步骤 Vue.js的组件的使用有3个步骤：创建组件构造器、注册组件和使用组件 示例
vue-common-command
爱偷吃香蕉的萌猴子
11-08 5766
vue-common-commandVue常用指令Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为， 我们可以将指令看作特殊的HTML特性（attribute） Vue.js提供了一些常用的内置指令v-if[条件渲染指令，它根据表达式的真假来删除和插入元素] v-show v-else v-for
HTML5-Canvas绘图字符串
爱偷吃香蕉的萌猴子
05-27 2103
HTML5-Canvas绘制字符串CanvasRenderingContext2D对象，为绘制文字提供了以下两个方法：fillText(String text,float x,float y,[float maxwidth]):填充字符串 strokeText(String text,float x,float y,[float maxwidth])：绘制边框 font="bold 45px宋体"
HTML5-Canvas绘图几何图形
爱偷吃香蕉的萌猴子
05-27 1797
HTML5-Canvas绘制几何图形CanvasRenderingContext2D对象，只提供两个方法来绘制几何图形fillStyle = "颜色" fillRect(float x,float y,float width,float height) strokeStyle = "颜色" lineWidth = 10 lineJoin - "meter|round|beve" stokeRect(
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值