当环境搭建及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. p4213 【模板】杜教筛(Sum)

    传送门 分析 我们知道 $\varphi * 1 = id$ $\mu * 1 = e$ 杜教筛即可 代码 #include<iostream> #include<cstdio> ...

  2. 914D Bash and a Tough Math Puzzle

    传送门 分析 用线段树维护区间gcd,每次查询找到第一个不是x倍数的点,如果这之后还有gcd不能被x整除的区间则这个区间不合法 代码 #include<iostream> #include ...

  3. Log4Net 调试时输出sql到 视图->输出的sql语句

    1.log4net.xml <?xml version="1.0" encoding="utf-8" ?> <!--log4net 配置--& ...

  4. 树莓派研究笔记(2)-- 安装Nginx 服务器,PHP 和 SQLite

    1. 安装nginx web 服务器 sudo apt-get install nginx 2. 启动nginx,nginx的www目录默认在/usr/share/nginx/html中 sudo / ...

  5. SDUT 3361 数据结构实验之图论四:迷宫探索

    数据结构实验之图论四:迷宫探索 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 有一个地下迷 ...

  6. WordCountPro 编码与测试

    WordCountPro github项目地址:https://github.com/handsomesnail/WordCountPro PSP表格 PSP2.1  PSP阶段  预估耗时(小时) ...

  7. 使用 classList API

    一.classList API 是什么 属于 DOM API,HTML5 引入,用来操作 HTML 标签的 class 属性值. classList 属性是一个只读的类数组对象,"实时&qu ...

  8. 《Head First Servlets & JSP》-13-过滤器和包装器

    过滤器是什么 与servlet非常类似,过滤器就是java组件,请求发送到servlet之前,可以用过滤器截获和处理清求,另外 servlet结束工作之后,在响应发回给客户之前,可以用过滤器处理响应. ...

  9. 《Maven实战》笔记-3-Maven仓库

    一.Maven仓库的分类 1.本地仓库 一般来说,在Maven项目目录下,没有诸如lib/这样用来存放依赖文件的目录. 要自定义本地仓库目录地址时,可以编辑文件~/.m2/setting.xml,设置 ...

  10. Java50道经典习题-程序37 报数

    题目:有n个人围成一圈,顺序排号.从第一个人开始报数(从1到3报数),凡报到3的人退出圈子,问最后留下的是原来第几号的那位.分析:最后留下的是第n号那位 import java.util.Scanne ...