新建的 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. Delphi编写后台监控软件

    Delphi编写后台监控软件         文章来源:Delphi程序员之家     后台监控软件,为了达到隐蔽监控的目的,应该满足正常运行时,不显示在任务栏上,在按Ctrl+Alt+Del出现的任 ...

  2. SpringBoot--Banner的定制和关闭

    SpringBoot项目启动的时候控制台会打印如下信息: 上面红色框框内的“SPRING BOOT”被称为Banner,意为横幅,默认会开启并在控制台打印,其实我们可以修改它的内容和样式,即定制:并选 ...

  3. 使用Python实现不同目录下文件的拷贝

    目标:要实现将一台计算机的共享文件夹中的文件备份到另一台计算机,如果存在同名的文件只要文件的大小和最后修改时间一致,则不拷贝该文件 python版本:Python3.7.1 python脚本: fro ...

  4. java-day08

    继承概念 继承是多态的前提,主要用于解决共性抽取 特点 子类可以拥有父类的内容,子类也可以有自己的专属内容 格式 public class 父类{} public class 子类 extends 父 ...

  5. SpringCloud学习笔记《---03 Ribbon Rule---》核心篇

  6. Python全栈开发:json与pickle

    #!/usr/bin/env python # -*- coding;utf-8 -*- """ 正解(序列化):将Python数据类型转换成json或者pickle格式 ...

  7. 算法系列:Shell 排序

    Copyright © 1900-2016, NORYES, All Rights Reserved. http://www.cnblogs.com/noryes/ 欢迎转载,请保留此版权声明. -- ...

  8. css3 ---2 属性的选择器

    存在和值属性选择器1:[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何. [name]{ background: pink; } <!DOCTYPE html& ...

  9. antidependence and data hazard

    See below example. ADDD  F6, F0, F8 SUBD   F8, F10, F14 Some article would say that “ There’s an ant ...

  10. 二分+2-sat——hdu3062

    hdu3622升级版 注意要保留两位小数 /* 给定n对圆心(x,y),要求从每对里找到一个点画圆,不可相交 使得最小半径最大 二分答案,设最小半径为r 然后两两配对一次进行判断,在2-sat上连边即 ...