安装 vue-router

cnpm i vue-router -S

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <title>Document</title>

</head>

<body>

    <div id="app">

        <app></app>

    </div>

</body>

</html>

main.js

import Vue from 'vue'

// 1，导入 vue-router包

import vueRouter from 'vue-router'

// 导入app组件

import app from './app.vue'

// 导入其他组件

import account from './components/account.vue'

import goodslist from './components/goodslist.vue'

// 2，手动安装vueRouter

Vue.use(vueRouter);

// 3，创建路由对象

var router = new vueRouter({

    routes : [

        // account goodslist

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

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

    ]

})

var vm = new Vue({

    el : '#app',

    render : c => c(app), // render会把el 指定的容器中所有的内容都清空覆盖

    // 所以不要把router-view和router-link直接写到 el 所控制的元素中。

    router

})

// 注意app这个组件是通过vm实例的render函数渲染的，render函数如果要渲染组件

// 渲染出来的组件只能放到el : '#app' 所指定的元素中去。

// account 和 goodslist组件是通过路由匹配监听到的，所以，这两个组件只能展示到

// 属于路由的<router-view></router-view>中去。

app.vue

<template>

    <div>

        <h1>app组件</h1>

        <router-link to="/account">account</router-link>

        <router-link to="/goodslist">goodslist</router-link>

        <router-view>

        </router-view>

    </div>

</template>

<script>

export default {

}

</script>

<style lang="">

</style>

account.vue和goodslist.vue组件为简单的template。

路由嵌套 

在account组件中加上 登录和注册

main.js

import Vue from 'vue'

// 1，导入 vue-router包

import vueRouter from 'vue-router'

// 导入app组件

import app from './app.vue'

// 导入其他组件

import account from './components/account.vue'

import goodslist from './components/goodslist.vue'

import login from './components/login.vue'

import register from './components/register.vue'

// 2，手动安装vueRouter

Vue.use(vueRouter);

// 3，创建路由对象

var router = new vueRouter({

    routes: [

        // account goodslist

        {

            path: '/account',

            component: account,

            children : [

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

                { path : 'register' , component : register}

            ]

        },

        {

            path: '/goodslist',

            component: goodslist

        }

    ]

})

var vm = new Vue({

    el: '#app',

    render: c => c(app), // render会把el 指定的容器中所有的内容都清空覆盖

    // 所以不要把router-view和router-link直接写到 el 所控制的元素中。

    router

})

// 注意app这个组件是通过vm实例的render函数渲染的，render函数如果要渲染组件

// 渲染出来的组件只能放到el : '#app' 所指定的元素中去。

// account 和 goodslist组件是通过路由匹配监听到的，所以，这两个组件只能展示到

// 属于路由的<router-view></router-view>中去。

account.vue

<template>

    <div>

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

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

        <router-view></router-view>

    </div>

</template>

<script>

export default {

}

</script>

<style lang="">

</style>

style中 lang属性和scoped 

<style lang="scss" scoped>

// scoped只让样式在当前组件生效

/* 普通的style标签只支持普通的样式 */

/* 要启用scss或less，需要为style元素设置lang属性 */

body {

  div {

      color: green;

  }

}

</style>

抽离路由模块

需要把vuerouter，和引入的组件，抽离到router.js

router.js     需要注意：main.js和router.js 都需要导入vue-router

// 导入其他组件

import account from './components/account.vue'

import goodslist from './components/goodslist.vue'

import login from './components/login.vue'

import register from './components/register.vue'

import vueRouter from 'vue-router'

// 3，创建路由对象

var router = new vueRouter({

    routes: [

        // account goodslist

        {

            path: '/account',

            component: account,

            children : [

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

                { path : 'register' , component : register}

            ]

        },

        {

            path: '/goodslist',

            component: goodslist

        }

    ]

})

// 向外暴露 router

export default router

Vue系列之 => 结合webpack使用vue-router的更多相关文章

  1. Vue系列（2）：Vue 安装

    前言:关于页面上的知识点,如有侵权,请看 这里 . 关键词:小白.Vue 安装.Vue目录结构.Vue 构建页面流程 ? 初学者安装 vue 用什么好 大家都知道,学 Vue 最好还是去官网学,官网写 ...

  2. webpack+sass+vue 入门教程（三）

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  3. webpack+sass+vue 入门教程（二）

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  4. webpack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  5. Vue系列之 => webpack结合vue使用

    安装 npm i vue -S ,  在html页面中放一个容器绑定到el上. 修改webpack.config.js , 在与entry , output节点平级加上 resolve 节点. res ...

  6. Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  7. webpack构建vue项目（再谈配置）

    webpack配置起来确实麻烦,这不,之前用刚配好了vue1+的版本,结果在(部分)安卓机上测试,发现存在开启热加载(dev-server)的情况下不能识别vue语法的问题,试了很多方法,都没能很好的 ...

  8. webpack构建vue项目（配置篇）

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  9. webpack配合vue.js实现完整的单页面demo

    本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...

随机推荐

  1. Leetcode中值得一做的题

    3.longest substring Given a string, find the length of the longest substring without repeating chara ...

  2. 根据浏览器判断是下载IOS还是其它的手机安装包

    http://tiao.67767.cn/DownLoad.aspx?cid=3509           <!DOCTYPE html>   <html>   <hea ...

  3. C# int[,] 和 int[][]

    int[] 一维数组 int[,]  二维数组 int[] []  交错数组 又称“数组的数组” 一维数组声明与初始化 声明: int[] a = new int[]; 声明与初始化: int arr ...

  4. spring Cache注解详解

    @CacheConfig:主要用于配置该类中会用到的一些共用的缓存配置.在这里@CacheConfig(cacheNames = "users"):配置了该数据访问对象中返回的内容 ...

  5. php基础--来自网页转载

    注意:1.网页文件放在wamp中的www文件下:2.www文件下不能出现中文:网页浏览的方法:1.没有建立站点:localhost/文件所在位置2.建立站点:(1)站点-新建站点-打开对话框 (2)修 ...

  6. Random类 一般跟生成随机数有关

    public class MyRandom extends Random{ public static void main(String[] args) { // 随机数,生产随机数 // java提 ...

  7. Easyui datagrid 数据表格 表格列头右键菜单选择展示列 JS

    Easyui ,数据表格加载出来以后,在表格头右键,会有显示筛选的功能: 如图: 然后可以取消勾选,就变成下面这个样子: 功能的实现是通过重写了easyui 的 $.fn.datagrid.defau ...

  8. Python全局变量和局部变量相关知识点

    知识点一: #在函数外面定义的变量叫全局变量 num = 100 def AAA(): ''' 如果在函数中直接修改全局变量,那么会产生异常 如果真的需要修改,可以在函数中进行声明(前面加入globa ...

  9. kubernetes in action - Services

    问题,如何将Pod所提供的功能提供给别人用?微服务,是服务,所以关键要把服务提供出去 直接把pod的静态ip提供给用户用,这个会有很多问题,比如failover,扩容,负载均衡等 所以需要servic ...

  10. 【转载】Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码

    本文转载自脚本之家,源网址为:https://www.jb51.net/article/147429.htm 一.Python中日期时间模块datetime介绍 (一).datetime模块中包含如下 ...