vue 路由入门(vue-router)
新建的 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)的更多相关文章
- Vue.js 入门 --- vue.js 安装
本博文转载 https://blog.csdn.net/m0_37479246/article/details/78836686 Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据 ...
- 攻克vue路由
先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...
- 14.vue路由&脚手架
一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...
- 07Vue.js快速入门-Vue路由详解
对于前端来说,其实浏览器配合超级连接就很好的实现了路由功能.但是对于单页面应用来说,浏览器和超级连接的跳转方式已经不能适用, 所以各大框架纷纷给出了单页面应用的解决路由跳转的方案. Vue框架的兼容性 ...
- 四、vue前端路由(轻松入门vue)
轻松入门vue系列 Vue前端路由 七.Vue前端路由 1. 路由的基本概念与原理 后端路由 前端路由 实现简单的前端路由 vue-router基本概念 2. vue-router的基本使用 基本使用 ...
- vue从入门到进阶:vue-router路由功能(九)
基本使用 html: <script src="https://unpkg.com/vue/dist/vue.js"></script> <scrip ...
- react router @4 和 vue路由 详解(八)vue路由守卫
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...
- react router @4 和 vue路由 详解(一)vue路由基础和使用
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 1.vue路由基础和使用 a.大概目录 我这里建了一个router文件夹,文件夹下有in ...
- react router @4 和 vue路由 详解(全)
react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...
随机推荐
- VS2010-MFC(常用控件:标签控件Tab Control 下)
转自:http://www.jizhuomi.com/software/207.html 上一节讲了标签控件知识的上半部分,本节继续讲下半部分. 标签控件的创建 MFC为标签控件的操作提供了CTabC ...
- JAVA 文件的上传下载
一.上传文件 1.使用 transferTo 上传 @ResponseBody @RequestMapping(value = "/file/upload") public Res ...
- UVA 12412 A Typical Homework (a.k.a Shi Xiong Bang Bang Mang)
题目链接:https://vjudge.net/problem/UVA-12412 题目大意 略. 分析 比较大规模的模拟,注意输入输出,浮点数精度,还有排名相同的输出顺序,还有一些边界情况处理. 代 ...
- js文件操作之——导出Excel (js-xlsx)
前阵子跟server同学讨论一个Excel导出的需求,我说JS搞不定,需要server来做,被server同学强行打脸. 今天研究了下,尼玛,不光可以,还很强大了! 总结:经验是害人的,尤其是在发展迅 ...
- “fixed+relative≈≈absolute”——对BFC的再次思考
好久没写博客了,刚好今天跨年夜没约到什么妹子,在家宅着不如写点东西好了. 需求 昨天晚上,给公司年会做一个移动端的投票页面,遇到一个UI优化的问题: · 正文内容少于一屏时,投票提交按钮固定显示在页面 ...
- 20.multi_case05
#coding:utf-8 # 通过gather方法 import asyncio async def a(t): print('-->', t) await asyncio.sleep(0.5 ...
- vue使用axios实现前后端通信
安装依赖 npm install --save axios # vue-axios是对axios的简单封装 npm install --save vue-axios 用例 在main.js里面进行全局 ...
- 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 ...
- LoadRunner内部结构(1)
LoadRunner内部结构(1) 根据http://www.wilsonmar.com/1loadrun.htm 翻译: LoadRunner内部结构 1, 被测系统是由驱动 ...
- 19-10-28-A
竟然?竟然?竟然? 我已经用了半个键盘的编号了$\text{T_T}$ $\mathbb{AFO}$感稍强 h1是不是有点大? ZJ+TJ: T1 以为是什么数据结垢,但是是个链表. 所以可以使用 v ...