<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title><%= title %></title>

     <link rel="stylesheet" href="/css/style.css">

     <script src="/js/vue.min.js"></script>

     <script src="/js/vue-router.min.js"></script>

 </head>

 <body>

     <h1>Vue Router</h1>

     <div id="box">

         <router-link to="/home">Home</router-link>

         <router-link to="/news">News</router-link>

         <div>

             <router-view></router-view>

         </div>

     </div>

 </body>

 </html>
 <script>

     // define component

     const Home = {

         template: '<h2>I am the homepage</h2>'

     }

     const News = {

         template: '<h2>I am the newspage</h2>'

     }

     // define router

     const routes = [

         { path: '/home', component: Home },

         { path: '/news', component: News }

     ]

     // create router instance & config routes

     const router = new VueRouter({

         routes

         // routes: routes

     })

     const app = new Vue({

         router

     }).$mount('#box')

 </script>

点击 Home 标签

点击 News 标签

通过开发者工具可以看到，router-link 标签被解析成了a标签， router-view 标签被 组件的模板内容替换。

当 <router-link> 对应的路由匹配成功，将自动设置 class 属性值 .router-link-active。

参考：http://router.vuejs.org/zh-cn/essentials/getting-started.html

vue-router 创建 vue 单页应用示例的更多相关文章

  1. [Vue 牛刀小试]：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  2. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

  3. Vue Cli 3 搭建单页应用项目刷新 404 问题 解决方案（以Apache为例）

    vue 项目 版本 Vue Cli 3.3 官方文档 https://router.vuejs.org/zh/guide/essentials/history-mode.html 因为本项目部署在 A ...

  4. vue ui 创建vue项目 没反应的解决办法 2021

    1.升级vue 脚手架 即可   2.再  vue ui  创建项目 cnpm i -g @vue/cli

  5. vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤

    通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...

  6. vue中创建全局单文件组件/命令

    1.在 vue中如果我们使用基于vue.js编写的插件,我们可以使用Vue.use() 如在main.js中: 2.添加全局命令,让每个vue单文件组件都可以使用到: 第一步:最好建一个全局的命令文件 ...

  7. vue项目中，单页图片过多，使用懒加载

    最近做项目,一页图片很多,加载的时候效果很差. 通过学习借鉴其他大神的方法,使用了插件vue-lazyload,使用这个插件,界面更美观了,加载的效果好起来. 安装 npm i vue-lazyloa ...

  8. 偏前端 - div+mui+vue.js 制作问卷调查单页 ——题目答案由后台随机给出10道

    封装的ajax获取数据.代码可能有些是多余的,没做处理!!点击提交后有弹框,在这里我没有贴出来.第一次写博客,这些也是别人教我的,经理解后,贴出来于大家分享 ——html—— <script t ...

  9. vue router返回上一页

    this.$router.go(-1) 不用router时,使用window.history.go(-1);

随机推荐

  1. Linux服务器模型及其对应的程序流程

    一.TCP循环服务器 TCP循环服务器一次只能处理一个客户端的请求,处理完成后,才能接受下一个客户端的请求,程序流程如下: socket(......);//创建套接字 bind(......);// ...

  2. libqrencode生成二维码

    在生成二维码的库中QREncoder最为常见,但是由于中文字符的特殊性,生成中文的时候会出现一定的错误,所以博主改用libqrencode,是一个纯C编写的类库,支持面也更广泛. ① 下载libqre ...

  3. 说说Spring中的WebDataBinder

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  4. java中方法的重写与重载的区别

    重载: 方法名相同,但是参数必须有区别(参数不同可以使类型不同,顺序不同,个数不同).前提: 同一个类中,方法名相同,参数列表不同的2个或多个方法构成方法的重载 参数列表不同指参数的类型,参数的个数, ...

  5. oracle的回收站介绍

    昨天做的展示oracle表空间功能剩余空间的功能,发现查询表dba_free_space时特别慢,经网上搜索,说是由于表空间碎片和回收站(Oracle 10g以后才有)引起的,后来搜到一片介绍回收站的 ...

  6. 安装dede显示dir的解决办法

    1.遇见安装页面出现dir 2.你这个肯定是已经安装过了的程序,把install文件夹下的index.html删掉,,你再看看install文件夹下有没有install_lock.txt 和index ...

  7. 单例模式双重检查锁（DCL)问题

    单例模式DoubleCheck 锁问题 先贴代码 public class DoubleCheckSingleton { private static DoubleCheckSingleton ins ...

  8. ACM: NBUT 1105 多连块拼图 - 水题 - 模拟

    NBUT 1105  多连块拼图 Time Limit:1000MS     Memory Limit:65535KB     64bit IO Format:  Practice  Appoint ...

  9. [Python学习] Linux环境下的Python配置，必备库的安装配置

    1.默认Python安装情况 一般情况,Linux会预装Python的,版本较低,比如Ubuntu15的系统一般预装的是Python2.7.10. 使用命令:which python可以查看当前的py ...

  10. Unity3d与Android交互

    先看下效果 你一定会说,然并卵! 没错,这里只是一个最简单的例子,unity与android activity 互相传参数. 玩过手游的都知道,在你要为你心爱的游戏角色准备花钱买钻石,点击购买的时候, ...