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路由有两个重要的属 ...
随机推荐
- iOS ARC下命名规则
当我在ARC模式下写以下代码的时候,编译器报错 Semantic Issue: Property's synthesized getter follows Cocoa naming conventio ...
- 牛客多校第四场 I string 后缀自动机/回文自动机
这个回文自动机的板有问题,它虽然能过这道题,但是在计算size的时候会出锅! 题意: 求一个字符串中本质不同的连续子串有几个,但是某串和它反转后的字符串算一个. 题解: 要注意的是,一般字符串题中的“ ...
- 在ubuntu下编写python
一般情况下,ubuntu已经安装了python,打开终端,直接输入python,即可进行python编写. 默认为python2 如果想写python3,在终端输入python3即可. 如果需要执行大 ...
- Pycharm新建文档的模板设置
下图演示的是关于python的文档的模板设置! 这样,以后的每一个新建的python的py文件,开头都会有下图中的两句:解释器路径与编码方式 步聚5的第二行内容打错了,应该是utf: #!/usr/b ...
- (十一)Json文件配置
接上一节,新建一个项目:JsonConfigSample 依然添加Microsoft.AspNetCore.All 在项目下新建一个Class.json配置文件 { ", "Cla ...
- 用MapReduce实现关系的自然连接
- Android开发 Html工具类详解
前言 在一些需求富文本显示或者编辑的开发情况下,数据都是用html的格式来保存文本信息的.而google是有提供解析html的工具类那就是Html.有了Html可以让TextView也支持富文本(其实 ...
- Python的字符串修改报错:TypeError: 'str' object does not support item assignment
Python中想修改字符串的最后一个字符,使用name[-1] = 'e'来实现,运行后报错. 报错内容是:TypeError: 'str' object does not support item ...
- 关于set_multicycle_path的最后总结
(1) –start/-end决定移动的距离以start_clock/end_clock为单元: (2) 对于-setup选项,移动距离是在默认关系的基础上移动(数值-1): (3) 默认往后, se ...
- 19-11-06-&
你&我处于这里……在一起? $$\text{%%%Wearry}$$ ZJ: 一遇到Wearry的思维题就得×得够呛. 考试心态炸裂,码上三个暴力然后就不知道该干啥了. 现在就想敲自己. 不要 ...