vue router路由(三)
当环境搭建及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路由(三)的更多相关文章
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- Vue Router 路由守卫:完整的导航解析流程
完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...
- Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转
问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...
- Vue系列:Vue Router 路由梳理
Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...
- 04 Vue Router路由管理器
路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...
- Vue Router路由管理器介绍
参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...
- Vue Router 路由实现原理
一.概念 通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式 更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash ...
- Vue - Router 路由
路由的注册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- vue router路由跳转了,但是页面没有变(已解决)
小白学习 router.js:两个组件之间跳转 但是路由变了,页面没有改变的原因是因为app.vue里面没有router-view(很关键)
随机推荐
- (华为机试大备战)java。多了解了解最常用的那个类库的方法对处理字符串的方法
1.常考字符串处理:对处理字符串的方法. (a)统计字符串中特定字符的个数. 2.郭靖考了一道二维数组?? 3.多了解了解最常用的那个类库的方法.
- 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 ...
- Linux中创建和使用静态库&动态库
库本质上来说库是一种可执行代码的二进制形式,可以被操作系统载入内存执行 Linux下库的种类 linux下的库有两种:静态库和共享库(动态库). 二者的不同点在于代码被载入的时刻不同. 静态库的代码在 ...
- bit byte的关系
字 word 字节 byte 位 bit 字长是指字的长度 1字=2字节(1 word = 2 byte) 1字节=8位(1 byte = 8bit) 一个字的字长为2个字节=2*8=16 一个字节 ...
- easyui 插入中间行
function inserrow() { var index_dx = 0; var index_lt = 0; var rows = $('#dg').datagrid('getRows')//获 ...
- 理解JavaScript普通函数以及箭头函数里使用的this
this 普通函数的this 普通函数的this是由动态作用域决定,它总指向于它的直接调用者.具体可以分为以下四项: this总是指向它的直接调用者, 例如 obj.func() ,那么func()里 ...
- C#提取TXT文档指定内容
早上有分享一篇<VB.NET提取TXT文档指定内容> http://www.cnblogs.com/insus/p/3267347.html 那是原网友的需求用VB.NET写的.刚才有只懂 ...
- javascript 常用兼容fire fox的解决办法
常用兼容fire fox的解决办法 一.js不兼容:1.event不兼容,必须通过参数传递过来: function test(event){ //兼容fire fox var event = even ...
- ubuntu - 14.04,安装CDT(Eclipse开发C++和C的插件)
我已经安装完Eclipse了,我想把CDT加入到我的Eclipse里面. 一,下载CDT:我下载的是64位的CDT,下载地址:http://eclipse.bluemix.net/packages/m ...
- P4718 【模板】Pollard-Rho算法
题面 传送门 题解 题解 太神仙了学不来orz //minamoto #include<bits/stdc++.h> #define R register #define ll long ...