新建的 js 文件如下:

import Vue from 'vue'
import VueRouter from 'vue-router' Vue.use(VueRouter) //全局使用该组件 // 声明常量
const first = {
template:'<div>first内容</div>'
}
const second = {
template:'<div>second内容</div>'
}
const Home = {
template:'<div>Home内容</div>'
} const router = new VueRouter({
mode:'history',
base:__dirname,//基础路径
routes:[ //路由
{
path:'/',
title:'首页',
component:Home
},//当根目录时,显示Home
{
path:'/first',
component:first
},
{
path:'/second',
component:second
}
]
}) new Vue({
router,
template:`
<div id="r">
<h1>导航</h1>
<ul>
<li>
<router-link to="/">/</router-link>
</li>
<li>
<router-link to="/first">first</router-link>
</li>
<li>
<router-link to="/second">second</router-link>
</li>
</ul>
<router-view></router-view>
</div>
`
}).$mount('#app')//f发布到app中去

vue 路由入门(vue-router)的更多相关文章

  1. Vue.js 入门 --- vue.js 安装

    本博文转载  https://blog.csdn.net/m0_37479246/article/details/78836686 Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据 ...

  2. 攻克vue路由

    先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...

  3. 14.vue路由&脚手架

    一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...

  4. 07Vue.js快速入门-Vue路由详解

    对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用, 所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. Vue框架的兼容性 ...

  5. 四、vue前端路由(轻松入门vue)

    轻松入门vue系列 Vue前端路由 七.Vue前端路由 1. 路由的基本概念与原理 后端路由 前端路由 实现简单的前端路由 vue-router基本概念 2. vue-router的基本使用 基本使用 ...

  6. vue从入门到进阶:vue-router路由功能(九)

    基本使用 html: <script src="https://unpkg.com/vue/dist/vue.js"></script> <scrip ...

  7. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

  8. react router @4 和 vue路由 详解(一)vue路由基础和使用

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 1.vue路由基础和使用 a.大概目录 我这里建了一个router文件夹,文件夹下有in ...

  9. react router @4 和 vue路由 详解(全)

    react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...

随机推荐

  1. VS2010-MFC(常用控件:标签控件Tab Control 下)

    转自:http://www.jizhuomi.com/software/207.html 上一节讲了标签控件知识的上半部分,本节继续讲下半部分. 标签控件的创建 MFC为标签控件的操作提供了CTabC ...

  2. JAVA 文件的上传下载

    一.上传文件 1.使用 transferTo 上传 @ResponseBody @RequestMapping(value = "/file/upload") public Res ...

  3. UVA 12412 A Typical Homework (a.k.a Shi Xiong Bang Bang Mang)

    题目链接:https://vjudge.net/problem/UVA-12412 题目大意 略. 分析 比较大规模的模拟,注意输入输出,浮点数精度,还有排名相同的输出顺序,还有一些边界情况处理. 代 ...

  4. js文件操作之——导出Excel (js-xlsx)

    前阵子跟server同学讨论一个Excel导出的需求,我说JS搞不定,需要server来做,被server同学强行打脸. 今天研究了下,尼玛,不光可以,还很强大了! 总结:经验是害人的,尤其是在发展迅 ...

  5. “fixed+relative≈≈absolute”——对BFC的再次思考

    好久没写博客了,刚好今天跨年夜没约到什么妹子,在家宅着不如写点东西好了. 需求 昨天晚上,给公司年会做一个移动端的投票页面,遇到一个UI优化的问题: · 正文内容少于一屏时,投票提交按钮固定显示在页面 ...

  6. 20.multi_case05

    #coding:utf-8 # 通过gather方法 import asyncio async def a(t): print('-->', t) await asyncio.sleep(0.5 ...

  7. vue使用axios实现前后端通信

    安装依赖 npm install --save axios # vue-axios是对axios的简单封装 npm install --save vue-axios 用例 在main.js里面进行全局 ...

  8. USACO training course Number Triangles 数塔 /// DP oj10122

    题目大意: ...就是数塔       7         3   8      8   1   0     2   7   4   4 4   5   2   6   5 7+3+8+7+5=30 ...

  9. LoadRunner内部结构(1)

    LoadRunner内部结构(1) 根据http://www.wilsonmar.com/1loadrun.htm  翻译: LoadRunner内部结构 1,            被测系统是由驱动 ...

  10. 19-10-28-A

    竟然?竟然?竟然? 我已经用了半个键盘的编号了$\text{T_T}$ $\mathbb{AFO}$感稍强 h1是不是有点大? ZJ+TJ: T1 以为是什么数据结垢,但是是个链表. 所以可以使用 v ...