安装 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. 识别拖动与点击操作之zepto的bug

    问题描述:给页面<a>标签绑定了tap事件,在移动设备上点击按钮貌似一切正常,可以响应.但是,把页面上下滑动几次之后,或者在滑动时手指滑动出移动屏幕之外,之后再点击按钮,就会发现第一次点击 ...

  2. PostgreSQL自学笔记:6 PostgreSQL函数

    6 PostgreSQL函数 6.2 数学函数 abs(x) 绝对值 pi() 圆周率π select abs(-3),pi(); cookie: MySQL中的pi()默认值3.141593, Po ...

  3. idea搜索jar中的类

    ctrl+n快捷键

  4. GitHub的实现是否是基于此语言的支持网络编程性呢？

    我觉好像是的,我之前很奇怪为什么那样就可以引用了,后来发现GitHub中的java  JavaScript  phton等语言都支持网络编程.

  5. IOS中多线程的总结

    首先要知道线程和进程的区别.一个系统上运行的每一个应用程序都是一个线程.而进程中要执行的任务都是在线程上来实现的,所以说线程是进程的最小执行单元. 进程最少要有一个线程.多线程,顾名思义就是多条线程. ...

  6. Module(CP343-1)Advanced system error SDB generation Error in rule file or rule file not found

    报这个故障的原因是因为安装目录下缺少三个 err文件.只要从好的目录下拷贝过来即可. C:\Program Files (x86)\SIEMENS\Step7\s7wbx\rul

  7. __x__(43)0910第六天__ clearfix 解决：垂直外边距重叠，高度塌陷

    <div class="box1"> <tabl></table> <div class="box2">< ...

  8. 软件体系架构之ssh框架阅读笔记

    首先我们要了解一下什么是ssh框架? SSH是 struts+spring+hibernate的一个集成框架,是目前比较流行的一种Web应用程序开源框架. ssh框架系统从职责上分为四层:web层 业 ...

  9. linux挂载系统ios文件与gcc安装

    挂载方法: 1.将iso文件拷贝到某一目录下,(/test) 2.建立挂载点文件夹:mkdir  /mnt/iso1 3.进入 mount –o loop  /test/**.iso  /mnt/is ...

  10. Asp.net 使用线程池实例

    实际开发经常会使用线程,如果每次使用都是创建线程.启动线程,然后销毁线程,从性能上来讲,非常占用系统开销,当线程达到一定量的时候会影响程序的运行和处理效率. 使用线程池:好处:线程池是一种多线程处理形 ...