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. maven引入spring相关依赖

    <!--spring相关包--> <dependency> <groupId>org.springframework</groupId> <art ...

  2. 00070_Calendar

    1.Calendar类概念 (1)Calendar是日历类,在Date后出现,替换掉了许多Date的方法.该类将所有可能用到的时间信息封装为静态成员变量,方便获取: (2)Calendar为抽象类,由 ...

  3. 【ACM-ICPC 2018 沈阳赛区网络预赛 I】Lattice's basics in digital electronics

    [链接] 我是链接,点我呀:) [题意] [题解] 每个单词的前缀都不同. 不能更明示了... 裸的字典树. 模拟一下.输出一下就ojbk了. [代码] #include <bits/stdc+ ...

  4. 阻止a标签跳页，使用单击事件函数处理该请求

    阻止a标签跳页href="javascript:void(0)" 单击该标签时 页面不跳页   使用单击事件函数来处理该单击请求  返回上一层页面 ---------------- ...

  5. CDH版hbase-0.98.1单机安装

    HBase 的安装有两种方式:单机安装和分布式安装.HBase的单机安装了解即可,大家重点掌握HBase 分布式集群的安装.下面我们分别进行介绍. HBase 单机安装 HBase 需要运行在 Had ...

  6. Redis,Memcache的区别和具体应用场景

    1. Memcached简介 Memcached是以LiveJurnal旗下Danga Interactive公司的Bard Fitzpatric为首开发的高性能分布式内存缓存服务器.其本质上就是一个 ...

  7. HDU 4350

    最近这些天,确实很烦恼.因为发现自己好像无论怎么样努力,也赶不上那些强校的学生.不得不承认,我们是传统弱校了.停了有一周了,什么也不想写,不停的反思,到底自己在哪里比不上人.D说,那是因为自始至终你只 ...

  8. HDU 4349

    想了好久,没思路.看别人说是卢卡斯,就去看卢卡斯了,看完卢卡斯,再用它推导一下,很容易就知道,答案是2^n的二进制中一的个数.改天找个时间写个卢卡斯的总结.~~~今晚竟然要上形势政治课,靠.... # ...

  9. NYOJ 589 糖果

    糖果 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描写叙述 topcoder工作室的PIAOYIi超级爱吃糖果.如今他拥有一大堆不同种类的糖果.他准备一口气把它们吃完.但是 ...

  10. 小P寻宝记——好基友一起走

    小P寻宝记--好基友一起走 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描写叙述 话说.上次小P到伊利哇呀国旅行得到了一批宝藏.他是 ...