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路由有两个重要的属 ...
随机推荐
- Delphi编写后台监控软件
Delphi编写后台监控软件 文章来源:Delphi程序员之家 后台监控软件,为了达到隐蔽监控的目的,应该满足正常运行时,不显示在任务栏上,在按Ctrl+Alt+Del出现的任 ...
- SpringBoot--Banner的定制和关闭
SpringBoot项目启动的时候控制台会打印如下信息: 上面红色框框内的“SPRING BOOT”被称为Banner,意为横幅,默认会开启并在控制台打印,其实我们可以修改它的内容和样式,即定制:并选 ...
- 使用Python实现不同目录下文件的拷贝
目标:要实现将一台计算机的共享文件夹中的文件备份到另一台计算机,如果存在同名的文件只要文件的大小和最后修改时间一致,则不拷贝该文件 python版本:Python3.7.1 python脚本: fro ...
- java-day08
继承概念 继承是多态的前提,主要用于解决共性抽取 特点 子类可以拥有父类的内容,子类也可以有自己的专属内容 格式 public class 父类{} public class 子类 extends 父 ...
- SpringCloud学习笔记《---03 Ribbon Rule---》核心篇
- Python全栈开发:json与pickle
#!/usr/bin/env python # -*- coding;utf-8 -*- """ 正解(序列化):将Python数据类型转换成json或者pickle格式 ...
- 算法系列:Shell 排序
Copyright © 1900-2016, NORYES, All Rights Reserved. http://www.cnblogs.com/noryes/ 欢迎转载,请保留此版权声明. -- ...
- css3 ---2 属性的选择器
存在和值属性选择器1:[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何. [name]{ background: pink; } <!DOCTYPE html& ...
- antidependence and data hazard
See below example. ADDD F6, F0, F8 SUBD F8, F10, F14 Some article would say that “ There’s an ant ...
- 二分+2-sat——hdu3062
hdu3622升级版 注意要保留两位小数 /* 给定n对圆心(x,y),要求从每对里找到一个点画圆,不可相交 使得最小半径最大 二分答案,设最小半径为r 然后两两配对一次进行判断,在2-sat上连边即 ...