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(很关键)
随机推荐
- p4213 【模板】杜教筛(Sum)
传送门 分析 我们知道 $\varphi * 1 = id$ $\mu * 1 = e$ 杜教筛即可 代码 #include<iostream> #include<cstdio> ...
- 914D Bash and a Tough Math Puzzle
传送门 分析 用线段树维护区间gcd,每次查询找到第一个不是x倍数的点,如果这之后还有gcd不能被x整除的区间则这个区间不合法 代码 #include<iostream> #include ...
- Log4Net 调试时输出sql到 视图->输出的sql语句
1.log4net.xml <?xml version="1.0" encoding="utf-8" ?> <!--log4net 配置--& ...
- 树莓派研究笔记(2)-- 安装Nginx 服务器,PHP 和 SQLite
1. 安装nginx web 服务器 sudo apt-get install nginx 2. 启动nginx,nginx的www目录默认在/usr/share/nginx/html中 sudo / ...
- SDUT 3361 数据结构实验之图论四:迷宫探索
数据结构实验之图论四:迷宫探索 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 有一个地下迷 ...
- WordCountPro 编码与测试
WordCountPro github项目地址:https://github.com/handsomesnail/WordCountPro PSP表格 PSP2.1 PSP阶段 预估耗时(小时) ...
- 使用 classList API
一.classList API 是什么 属于 DOM API,HTML5 引入,用来操作 HTML 标签的 class 属性值. classList 属性是一个只读的类数组对象,"实时&qu ...
- 《Head First Servlets & JSP》-13-过滤器和包装器
过滤器是什么 与servlet非常类似,过滤器就是java组件,请求发送到servlet之前,可以用过滤器截获和处理清求,另外 servlet结束工作之后,在响应发回给客户之前,可以用过滤器处理响应. ...
- 《Maven实战》笔记-3-Maven仓库
一.Maven仓库的分类 1.本地仓库 一般来说,在Maven项目目录下,没有诸如lib/这样用来存放依赖文件的目录. 要自定义本地仓库目录地址时,可以编辑文件~/.m2/setting.xml,设置 ...
- Java50道经典习题-程序37 报数
题目:有n个人围成一圈,顺序排号.从第一个人开始报数(从1到3报数),凡报到3的人退出圈子,问最后留下的是原来第几号的那位.分析:最后留下的是第n号那位 import java.util.Scanne ...