安装 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. ng表单验证

    <angular>中form表单的验: 1.在form中加上 novalidate 2.利用ng-pattern验证 (*如果不匹配的话 ng-model是绑定不上数据的) 常用的表单验证 ...

  2. golang 框架 之 CHI

    1,特性 golang 的 http框架已经有很多,究其原因:go 的net/http 已经做了大部分工作,封装一个框架的工作量,没有那么的大. 不过呢,林子大了鸟也就多了,部分框架的代码质量实在不敢 ...

  3. java文件与流课后作业

    1,编写一个程序,指定一个文件夹,能自动计算出其总容量, 2,编写一个文件加解密程序,通过命令行完成加解密工作3,编写一个文件分割工具,能把一个大文件分割成多个小的文件.并且能再次把它们合并起来得到完 ...

  4. Python基础之语句1

    一.行定义(两类): 1.物理行:程序员编写代码的行. 2.逻辑行:python解释器需要执行的指令. 建议:一个逻辑行在一个物理行上,若一个物理行使用多个逻辑行,需要使用分号隔开:如果逻辑行过长,可 ...

  5. 删除U8中单据已经审核完成但工作流未完成的任务

    问题描述: U8工作流终审结点后面还有节点时,当终审终点完成后,系统会通知后面的节点进行审核,但单据显示已经审核完成,后面的节点无法审核,工作任务会一直挂着,无法删除. 例如下图中,节点"终 ...

  6. linux --- Ansible篇

    ansible背景 1.什么是ansible? ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优 ...

  7. mysql - Truncated incorrect DOUBLE value: 'undefined'

    mysql - Truncated incorrect DOUBLE value: 'undefined' 我是怎么遇到这个问题的? 我要从多个表里,查询统计数据,保存到统计表里,需要执行下面这种结构 ...

  8. Windows 主机名映射地址

    在开发中大数据集群中我们自己的电脑主机名映射不到集群的主机名下面我们就去修改自己电脑 主机名映射地址 c/Windows/System32/drivers/etc/host   文件将主机名和IP地址 ...

  9. linux CentOS 安装 nginx

    官方网址:http://nginx.org/en/download.html 一.安装基础组件 yum install gcc-c++ yum install pcre yum install pcr ...

  10. 学习ActiveMQ(七)：JMS消息的事务管理

    Spring提供了一个JmsTransactionManager用于对JMS ConnectionFactory做事务管理.这将允许JMS应用利用Spring的事务管理特性.JmsTransactio ...