Vue 路由系统

 简单示例

main.js 

import Vue from 'vue'
import App from './App.vue' //https://router.vuejs.org/zh/guide/#html 如有疑问。请看官方手册 // 1.引入 vue-router
import VurRouter from "vue-router" // 3.定义(路由 )组件
import Vmain from "./components/Vmain"
import Vcourse from "./components/Vcourse"
import Vmark from "./components/Vmark" // 2.声明使用 vue-router
Vue.use(VurRouter); // 4.定义路由对象,每个路由对象映射一个组件
const routes = [
{path:"/",component:Vmain},
{path:"/course",component:Vcourse},
{path:"/mark",component:Vmark}
]; // 5.将路由对象的集合加载在 VurRouter 中
const router = new VurRouter({
mode:"history",
routes
}); new Vue({
el: '#app',
// 6. 挂载在 Vue 中
router, // 相当于 routes:routes 的简写
render: h => h(App), }); // 7. 现在可以启动你的应用了

APP.vue

<template>
<div>
<ul>
<li>
<router-link to="/">首页</router-link>
</li>
<li>
<router-link to="/course">课程表</router-link>
</li>
<li>
<router-link to="/mark">编辑器</router-link>
</li>
</ul>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!--路由 出口-->
<router-view></router-view>
</div>
</template> <script>
export default {
name: 'app',
data() {
return {}
},
methods: {},
computed: {},
components: {},
}
</script> <style> </style>

总结

准备:

    引入vue-router

    声明使用

    定义组件

    映射组件URL

    加载在 vue-router

    挂载在 vue 上

使用:

  router-link 标签

  to 属性到 URL

  router-view 展现组件内容

10.3 Vue 路由系统的更多相关文章

  1. Vue路由系统

    Vue路由系统 一切分离都是为了更好的结合,本文详细介绍了前后端分离架构之后,前端如何实现路由控制,即Vue路由系统. 一.VueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改 ...

  2. 【Vue路由系统详述】

    目录 路由命名 路由参数 路由参数的实现原理 子路由 子路由之append 动态绑定属性 子路由之append升级版 子路由之非append 路由重定向 手动路由 路由钩子 在路径中去掉"# ...

  3. 10、VUE路由技术

    1.前端路由 前端路由在很多开源的js类库框架中都得到支持,如AngularJS.Backbone.Vue.js等等. 前端路由和后端路由原理一样,是让所有的交互和展示在一个页面运行,以达到减少服务器 ...

  4. Vue专题-路由系统

    一切分离都是为了更好的结合,本文详细介绍了前后端分离架构之后,前端如果实现路由控制,即Vue路由系统. Vue路由系统 VueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改变, ...

  5. Vue.js之路由系统

    Vue.js生态之vue-router vue-router是什么? vue-router是Vue的路由系统,定位资源的,我们可以不进行整页刷新去切换页面内容. vue-router的安装与基本配置 ...

  6. vue学习之六路由系统

    一.vueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改变,从而不断修改组件内容来实现的,我们来试试不使用VueRouter,自己实现路由控制,如下代码: <!DOCTY ...

  7. 简简单单的Vue3(插件开发,路由系统,状态管理)

    既然选择了远方,便只顾风雨兼程 __ HANS许 系列:零基础搭建前后端分离项目 系列:零基础搭建前后端分离项目 插件 路由(vue-router) 状态管理模式(Vuex) 那在上篇文章,我们讲了, ...

  8. 04Vue.js路由系统

    Vue.js路由系统: https://pizzali.github.io/2018/10/28/Vue.js%E8%B7%AF%E7%94%B1%E7%B3%BB%E7%BB%9F/

  9. ASP.NET Core的路由[2]:路由系统的核心对象——Router

    ASP.NET Core应用中的路由机制实现在RouterMiddleware中间件中,它的目的在于通过路由解析为请求找到一个匹配的处理器,同时将请求携带的数据以路由参数的形式解析出来供后续请求处理流 ...

随机推荐

  1. 容器化系列 - GitLab启动和配置 on Docker

    本文简单说明了如何在Docker容器中运行GitLab. 1 准备工作 1.1 下载镜像 $ docker pull docker.io/gitlab/gitlab-ce:latest 1.2 创建持 ...

  2. 使用VBScript 脚本 开机播放声音

    前言:环境Window 10 第一步写一个 VBScript 脚本 新建一个文本文档,将下面的代码复制到文本文档中,Ctrl+S保存 将文本文档的.txt 后缀 改为.vbs即可 最后,双击这个 vb ...

  3. Python装饰器、内置函数之金兰契友

    装饰器:装饰器的实质就是一个闭包,而闭包又是嵌套函数的一种.所以也可以理解装饰器是一种特殊的函数.因为程序一般都遵守开放封闭原则,软件在设计初期不可能把所有情况都想到,所以一般软件都支持功能上的扩展, ...

  4. 【iOS开发】Alamofire框架的使用一基本用法

    Alamofire框架的使用一 —— 基本用法 对于使用Objective-C的开发者,一定非常熟悉AFNetworking这个网络框架.在苹果推出的Swift之后,AFNetworking的作者专门 ...

  5. Python__装饰器练习题

    一:编写函数,(函数执行的时间是随机的) import time def timmer(func): def wrapper(*args,**kwargs): start= time.time() f ...

  6. java图片上传及图片回显1

    目的:选择图片,进行图片回显之后将图片保存到服务器上(PS:没有使用任何插件,样式很丑) 实现方式: js+servlet+jsp的方式来实现 事先准备: 文件上传处理在浏览器中是以流的形式提交到服务 ...

  7. Java实现Sunday百万级数据量的字符串快速匹配算法

    背景       在平时的项目中,几乎都会用到比较两个字符串时候相等的问题,通常是用==或者equals()进行,这是在数据相对比较少的情况下是没问题的,当数据库中的数据达到几十万甚至是上百万千万的数 ...

  8. 通过shell命令往android中写入配置

    C:\Users>adb shell setprop "persist.sys.btylevel" 100 C:\Users>adb shell getprop &qu ...

  9. Windows Service 学习系列(三)——循环引擎 ICycleEngine

    摘要:转载:https://www.cnblogs.com/zhuweisky/archive/2009/09/01/1557792.html#undefined 1.缘起: 有些系统需要每隔一段时间 ...

  10. web Deploy发布问题

    使用vs开发的时候,经常会发布项目.传统发布是登陆远程桌面.或ftp这些发布都有一定的麻烦.不能灵活的管理发布的文件.因此后来研究了web Deploy,研究之后发现是很不错的发布工具.这里把我使用w ...