安装 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. 2017-2018 Northwestern European Regional Contest (NWERC 2017)

    A. Ascending Photo 贪心增广. #include<bits/stdc++.h> using namespace std; const int MAXN = 1000000 ...

  2. session 存到memcache里

    web服务器的php session都给memcached ,这样你不管分发器把 ip连接分给哪个web服务器都不会有问题了,配置方法很简单,就在php的配置文件内 增加一条语句就可以了,不过前提你需 ...

  3. CSS（四）

    css元素溢出 当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置. overflow的设置项: 1.visible 默认值.内容不会被 ...

  4. [jzoj]2505.【NOIP2011模拟7.29】藤原妹红

    Link https://jzoj.net/senior/#main/show/2505 Description 在幻想乡,藤原妹红是拥有不老不死能力的人类.虽然不喜欢与人们交流,妹红仍然保护着误入迷 ...

  5. Laravel使用心得

    Laravel使用心得 1.session使用 laravel的session使用时,不要使用exit和die,否则session会为空. 2.ajax提交注意框架对post的CSRF保护 在头加上& ...

  6. priority_queue和sort应用

    #include"iostream" #include"String" #include"stdio.h" #include "s ...

  7. Web版记账本开发记录（二）开发过程遇到的问题小结1 对数据库的区间查询

    问题1 对数据库的区间查询 如功能显示,想要按照年份和月份查询相应的记录,就要使用区间查询 对应的代码如下 servlet层的ChaXun java.sql.Date sDate = new java ...

  8. jQuery插件开发的五种形态小结(转)

    关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队了也分享过一次关于插件的课.开始的时候整觉的很复杂的代码,现在再次看的时候就清晰了许多.这里我把我自己总结出来的东西分享出 ...

  9. Python自学知识点----Day01

    Linux 次方运算符** 操作系统:1).直接操纵硬件 2).将操纵硬件封装成系统调用,利用应用程序进行调用 操作系统:windows  用户群体大 macos      适用开发人员 Linux  ...

  10. 与postman的第一次亲密接触

    postman和JMeters是外部接口测试的两个工具,通过界面化的方法,来实现操作http报文携带的请求字段.VK值.cookie.header值及文件.本篇主要介绍postman.  首先,补充下 ...