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. Mysql学习总结（37）——Mysql Limit 分页查询优化

    select * from table LIMIT 5,10; #返回第6-15行数据 select * from table LIMIT 5; #返回前5行 select * from table ...

  2. jQuery选择器练习中，带空格和不带空格的问题

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. windowbuilde02 表格创建

    /** * 设置表格 * * * */ private JTable getTable() { if (table == null) { table = new JTable(); //定义列名数组 ...

  4. 数据库连接池dataesoruce pool深入理解

    8.数据库连接池的connection都是长连接的,以方便多次调用,多人连续使用.dataSourcePool9.数据库连接池中的连接,是在你用完之后,返回给数据库连接池的,并不是close()掉,而 ...

  5. java书籍推荐：《Java SE 6 技術手册》

    Java SE 6 技術手册 或  Java SE 6 技術手册 Java SE 6 技術手册 為什麼選擇用 Markdown?仅仅是單純把文件又一次排版太無聊了,不如趁這個機會學些新東西.所以我就藉 ...

  6. OpenST Basic tool library

    /***************************************************************************** * OpenST Basic tool l ...

  7. [Oracle] - Connect to a PDB of Oracle12c

    Story about CDB and PDB Oracle12c has a new feature and definition of CDB and PDB. If you first use ...

  8. 本地 配置 Memcache

    如果帮到了您,可以支持一下,谢谢您的支持! Windows下的Memcache安装: 64bit:如果需要win64版,下载 memcached-win64-1.4.4-14.zip(直接下),里面有 ...

  9. LinkedList 方法知识点

    package test_day_9; import java.util.Iterator; import java.util.LinkedList; public class LinkedListD ...

  10. idea使用技巧资料篇

    基本使用:https://my.oschina.net/lujianing/blog/177042#OSC_h1_2 解决idea卡顿问题:http://www.cnblogs.com/ae6623/ ...