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. C# List源码分析(一)

    事件原因,之前在公司写代码的时候,带我的师傅建议我对List的长度最好在初始化的时候进行优化,这样对GC更加友好,所以就有了这个文章,来理解下List 容量自适应的实现. List 继承于IList, ...

  2. jQuery点击图片放大显示原图效果

    HTML部分:<div id="append_parent"></div> JS代码部分: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  3. 【hdu 4135】Co-prime

    [题目链接]:http://acm.hdu.edu.cn/showproblem.php?pid=4135 [题意] 让你求出[a..b]这个区间内和N互质的数的个数; [题解] 利用前缀和,求出[1 ...

  4. C调用java方法签名

    1.AS2.0 D:\androidMyWork\SmartCam\app\build\intermediates\classes\debug>javap -s com.admin.smartc ...

  5. SSH框架整合截图(二)

    客户拜访管理 1 什么是客户拜访 (1)客户:与公司有业务往来的 (2)用户:可以使用系统的人 2 用户和客户关系 (1)用户和客户之间是拜访的关系 (2)用户 和 客户 是 多对多关系 ** 一个用 ...

  6. 2015 Multi-University Training Contest 8 hdu 5385 The path

    The path Time Limit: 2000ms Memory Limit: 65536KB This problem will be judged on HDU. Original ID: 5 ...

  7. Atom介绍和安装步骤

    Atom是全然基于web技术开发而成的一款编辑器,其底层架构依赖于chromium,google chrome浏览器也是基于此.编辑器的每一个窗体都是本地渲染的web页面,而且其风格与时下流行的sub ...

  8. vue中 router-link 传递参数以及获取

    将所遇见的问题一步一步记录下来,不久便会成长 今天在修改前端(vue) BUG的时候遇见 router-link标签,传递参数到另一个页面,确不知道参数在另一个页面怎么接收,于是找度娘需求解决办法,最 ...

  9. [实例]ROS使用OpenCV读取图像并发布图像消息在rviz中显示

    思路: (1)使用opencv读取本地图像 (2)调用cv_bridge::CvImage().toImageMsg()将本地图像发送给rviz显示 一.使用opencv读取本地图像并发布图像消息 ( ...

  10. 算法入门经典第六章 例题6-14 Abbott的复仇(Abbott's Revenge)BFS算法实现

    Sample Input 3 1 N 3 3 1 1 WL NR * 1 2 WLF NR ER * 1 3 NL ER * 2 1 SL WR NF * 2 2 SL WF ELF * 2 3 SF ...