当环境搭建及Vue语法与指令都有所了解,该说下router。

build目录是打包配置文件 (不建议动)

config是vue项目基本配置文件

dist是构建后文件

js 手动创建 (根据需要)

node_modules 根据package.json 安装依赖模块

src资源文件,基本文件都会放在这里

app.vue  父组件

main.js 入口文件

static构建好的文件会在这个目录

index.html 主页

1、首先安装路由通过npm:

npm install vue-router

在main.js文件中,引入路由(router)   './router'找到当前目录router

main.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App },
data:{
urlPath : rootPath.pathUrl()
},
mounted: function(){
//alert(JSON.stringify(this.urlPath))
}
})

router/index.js  可以对vue-router引入,路由控制跳转都会在这里处理

import Vue from 'vue'
import Router from 'vue-router'
//import VueResource from 'vue-resource'
//import Hello from '@/components/Hello' Vue.use(Router)
//Vue.use(VueResource) export default new Router({
routes: [
{
path: '/',
name: 'A',
component: require('../components/A')
},
   {
path: '/',
name: 'B',
component: require('../components/B')
}
] })

组件 components/A.vue  结构如下

<template>
<div id='demo'> 这里仅有一个外层标签 </div>
<script>
export default{
data: function(){
return{....}
}
}
</script>
<style>
.....
</style>
</template>

组件A

<template>
<div> <!---只允许有一个最外层标签 !-->
<div>
<p>{{message}}</p>
<p><router-link :to="{ path: '/B'}">跳转B组件</router-link></p>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
message: 'vue好帅!'
}
}
}
</script>

点击调整B组件

通过<router-link>

单页面通过路由与组件来完成。

注意下,app.vue

<template>
<div id="app">
<router-view></router-view>
</div>
</template> <script>
export default {
name: 'app'
}
</script>

接下来,传参使用

vue router路由(三)的更多相关文章

  1. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  2. Vue Router 路由守卫:完整的导航解析流程

    完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...

  3. Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  4. Vue系列:Vue Router 路由梳理

    Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...

  5. 04 Vue Router路由管理器

    路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...

  6. Vue Router路由管理器介绍

    参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...

  7. Vue Router 路由实现原理

    一.概念 通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式 更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash  ...

  8. Vue - Router 路由

    路由的注册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. vue router路由跳转了,但是页面没有变(已解决)

    小白学习 router.js:两个组件之间跳转 但是路由变了,页面没有改变的原因是因为app.vue里面没有router-view(很关键)

随机推荐

  1. (华为机试大备战)java。多了解了解最常用的那个类库的方法对处理字符串的方法

    1.常考字符串处理:对处理字符串的方法. (a)统计字符串中特定字符的个数. 2.郭靖考了一道二维数组?? 3.多了解了解最常用的那个类库的方法.

  2. Entity Framework Tutorial Basics(33):Spatial Data type support in Entity Framework 5.0

    Spatial Data type support in Entity Framework 5.0 MS SQL Server 2008 introduced two spatial data typ ...

  3. Linux中创建和使用静态库&动态库

    库本质上来说库是一种可执行代码的二进制形式,可以被操作系统载入内存执行 Linux下库的种类 linux下的库有两种:静态库和共享库(动态库). 二者的不同点在于代码被载入的时刻不同. 静态库的代码在 ...

  4. bit byte的关系

    字 word 字节 byte 位 bit 字长是指字的长度 1字=2字节(1 word = 2 byte) 1字节=8位(1 byte = 8bit)  一个字的字长为2个字节=2*8=16 一个字节 ...

  5. easyui 插入中间行

    function inserrow() { var index_dx = 0; var index_lt = 0; var rows = $('#dg').datagrid('getRows')//获 ...

  6. 理解JavaScript普通函数以及箭头函数里使用的this

    this 普通函数的this 普通函数的this是由动态作用域决定,它总指向于它的直接调用者.具体可以分为以下四项: this总是指向它的直接调用者, 例如 obj.func() ,那么func()里 ...

  7. C#提取TXT文档指定内容

    早上有分享一篇<VB.NET提取TXT文档指定内容> http://www.cnblogs.com/insus/p/3267347.html 那是原网友的需求用VB.NET写的.刚才有只懂 ...

  8. javascript 常用兼容fire fox的解决办法

    常用兼容fire fox的解决办法 一.js不兼容:1.event不兼容,必须通过参数传递过来: function test(event){ //兼容fire fox var event = even ...

  9. ubuntu - 14.04,安装CDT(Eclipse开发C++和C的插件)

    我已经安装完Eclipse了,我想把CDT加入到我的Eclipse里面. 一,下载CDT:我下载的是64位的CDT,下载地址:http://eclipse.bluemix.net/packages/m ...

  10. P4718 【模板】Pollard-Rho算法

    题面 传送门 题解 题解 太神仙了学不来orz //minamoto #include<bits/stdc++.h> #define R register #define ll long ...