安装 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. (三)ajax请求不同源之cors跨域

    一.基本原理 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)它允许浏览器向跨源服务器,发出 XMLHttpReque ...

  2. C++ 简单的控制台贪吃蛇小游戏

    由于比较懒,所以不怎么写,觉得这样不应该.我应该对自己学的做出整理,不管是高端低端,写出来是自己的. // 贪吃蛇.cpp : 定义控制台应用程序的入口点. // #include "std ...

  3. jmeter实例介绍

    JMeter基础之一 一个简单的性能测试  测试需求: 1)测试目标网站是fnng.cnblogs.com 和 tt-topia.rhcloud.com 2)测试目的是该网站在负载达到20 QPS 时 ...

  4. chrome 安装setupvpn 解决chorme未能成功加载扩展程序的问题

    一: vpn文件    https://pan.baidu.com/s/1wZV2HAC3GHlh1bjlvbilRg 提取码:  gz72; 二 : 安装步骤 ------请看完以下步骤,不要直接拖 ...

  5. ArcGIS JavaScript开发过程中，底图产生拼接缝问题

    ArcGIS JS开发过程中,地图产生了拼接缝 上图调用的是天地图,确认原地图服务是没有这种缝隙的. 其他人电脑上测试,发现没有此问题. 纠结了半天,群里问了大神,大神说是浏览器设置了缩放.... 取 ...

  6. 工厂参观记：.NET Core 中 HttpClientFactory 如何解决 HttpClient 臭名昭著的问题

    在 .NET Framework 与 .NET Core 中 HttpClient 有个臭名昭著的问题,HttpClient 实现了 IDispose 接口,但当你 Dispose 它时,它不会立即关 ...

  7. postman自动化，测试脚本

    //获取当前时间的时间戳 function getTimestamp(len=10) { // 如果需要自动获取则将此处代码放开 // var tmp = Date.parse( new Date() ...

  8. GenericServlet

    Generic-汉语意思:类的adj GenericServlet是一个抽象类,它的源码很容易看懂,继承Servlet接口和ServletConfig接口 所有它里面有父接口里面的方法,所以它就是在S ...

  9. scrapy爬虫框架和selenium的配合使用

    scrapy框架的请求流程 scrapy框架? Scrapy 是基于twisted框架开发而来,twisted是一个流行的事件驱动的python网络框架.因此Scrapy使用了一种非阻塞(又名异步)的 ...

  10. javascript 的引入

    目录 一.静态引入 1. html标签script引入 2. esm 中import ModuleName from 'module/path' 3. commonjs 中 const ModuleN ...