vue-router的创建

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

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

    <!-- 1-导入包 -->

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

</head>

<body>

<div id="app">

    <router-link to="/login">登录</router-link>

    <router-link to="/register">注册</router-link>

    <!-- 容器 -->

<router-view></router-view>

</div>

</body>

</html>

<script>

// 2-创建子组件

var login={

    template:'<h3>这个是登录子组件，是A开发而</h3>'

}

var register={

    template:'<h3>这个是注册子组件，是B开发而</h3>'

}

// 3-创建路由对象

var router = new VueRouter({

    routes:[//路由规则

    {path:'/', redirect:'/login'},//重定向 启动就显示出来

{path:'/login',component:login},

{path:'/register',component:register}

    ],

    linkActiveClass:'myactive' //激活相关的类

})

// 创建一个 vue实例，得到viewModel

var vm = new Vue({

    el:"#app",

    data:{},

    methods:{},

    // router:router = 可以写成 router

    router

})

</script>

vue-router的创建（1）的更多相关文章

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

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

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

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

  3. Vue3: 如何以 Vite 创建，以 Vue Router, Vuex, Ant Design 开始应用

    本文代码: https://github.com/ikuokuo/start-vue3 在线演示: https://ikuokuo.github.io/start-vue3/ Vite 创建 Vue ...

  4. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  5. vue router 只需要这么几步

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. Vue.js 2.x笔记：路由Vue Router（6）

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  7. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...

  8. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  9. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  10. python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

随机推荐

  1. 【codeforces 805C】Find Amir

    [题目链接]:http://codeforces.com/contest/805/problem/C [题意] 你能从任意一个位置i到达任意一个位置j; 花费为(i+j)%(n+1); 问你从任意一个 ...

  2. 环境搭建Selenium2+Eclipse+Java+TestNG_(一)

    第一步  安装JDK 第二步 下载Eclipse 第三步 在Eclipse中安装TestNG 第四步 下载Selenium IDE.SeleniumRC.IEDriverServer 第五步 下载Fi ...

  3. Virtual address cache memory, processor and multiprocessor

    An embodiment provides a virtual address cache memory including: a TLB virtual page memory configure ...

  4. 关于springboot整合的详细过程

    Spring-boot http://tengj.top/2017/04/24/springboot0/

  5. 操作服务器及MySQL数据库可以使其远程链接

    转自原文操作服务器及MySQL数据库可以使其远程链接 一般情况分三个地方准备,MySQL数据库,防火墙,还有你的服务器主机的准备 操作系统为centos6.5.其他系统大致差不多. 1:在服务器中安装 ...

  6. HDOJ 3339 In Action

    最短路+01背包 In Action Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  7. robot framework环境配置

    1.Robot framework的安装 作用:web自动化测试框架. RF框架是基于python 的,所以一定要有python环境.网上可以自行查找. 下载地址:https://pypi.pytho ...

  8. elasticsearch如何安全重启节点

    elasticsearch如何安全重启节点 标签: elasticsearch 节点 | 发表时间:2016-05-24 03:58 | 作者:kfcman 分享到: 出处:http://www.it ...

  9. EOJ 3124 单词表

    题目描述 提取英文文本中的单词,重复出现的单词只取一个,把它们按照字典顺序排序,建立为一个单词表. 例如:英文文本如下: “ask not what your country can do for y ...

  10. Modules：手机号码验证

    ylbtech-Modules:手机号码验证 手机号码验证,文档以JFB项目架构为原型,介绍实现原理,如何调用和应用实例. 架构包括5个主要模块:Basebase,Base,Service,Api和W ...