vue学习(十二)vue全家桶 Vue-router&Vuex
一 vue-router的安装
二 vue-router的基本使用
三 命名路由
四 动态路由的匹配和路由组件的复用
一 vue-router的安装
NPM
npm install vue-router
如果在一个模块化工程中使用它,必须要通过 Vue.use()
明确地安装路由功能:
// 在router/index.js中
import Vue from 'vue'
import VueRouter from 'vue-router' Vue.use(VueRouter) // 之后在main.js中
import router from './router'
二 vue-router的基本使用
// router/index.js 与直接生成的此文件有些不一样 // 1. 导入
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
// 2.模块化机制 使用
Vue.use(VueRouter) // 3. 创建路由器对象
export default new VueRouter ({
routes: [ {
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router' Vue.config.productionTip = false // 4 在main.js中挂载 router
new Vue({
router,
render: h => h(App)
}).$mount('#app')
// App.vue
<template>
<div id="app">
<div id="nav">
<!--router-link相当于a标签 to相当于href-->
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> </div>
<!--router-view 相当于路由组件的出口-->
<router-view/>
</div>
</template>
三 命名路由
index.js
// 1. 导入
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
// 2.模块化机制 使用
Vue.use(VueRouter) // 3. 创建路由器对象
export default new VueRouter({
routes: [ {
path: '/',
name: 'home',
component: Home index.js 写个 name
},
{
path: '/about',
name: 'about',
component: About
}
]
})
// App.vue
<template>
<div id="app">
<div id="nav">
<!--<router-link to="/">Home</router-link> |-->
<router-link :to="{name:'home'}">首页</router-link>
| // 对比两句话
<!--<router-link to="/about">About</router-link>-->
<router-link :to="{name:'about'}">About</router-link> </div>
<!--router-view 相当于路由组件的出口-->
<router-view/>
</div>
</template>
四 动态路由的匹配和路由组件的复用
动态路由的匹配
需求:
http://localhost:8080/user/1
http://localhost:8080/user/2
// 都是同样的页面 要新建一个User.vue的文件
1. 先配置路由 index.js
// 1. 导入
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import User from '../views/User.vue' // 2.模块化机制 使用
Vue.use(VueRouter) // 3. 创建路由器对象
export default new VueRouter({
routes: [ {
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
// 1. 匹配路由 【:id】是哪个id的用户 :id
path: '/user/:id',
name: 'user',
component: User
}
]
})
2 App.vue
<template>
<div id="app">
<div id="nav">
<!--router-link相当于a标签 to相当于href-->
<!--<router-link to="/">Home</router-link> |-->
<router-link :to="{name:'home'}">首页</router-link>|
|
<!--<router-link to="/about">About</router-link>-->
<router-link :to="{name:'about'}">About</router-link>|
<router-link :to="{name:'user', params:{id:1}}">用户1</router-link>|
<router-link :to="{name:'user', params:{id:2}}">用户2</router-link>|
</div>
<!--router-view 相当于路由组件的出口-->
<router-view/>
</div>
</template>
3 新建一个User.vue的文件
<template>
<div class="user">
<h1>用户{{$route.params.id}}页面</h1>
</div>
</template>
路由组件的复用
<script>
export default {
// 当路由参数变化时 /user/1 切换到 /user/2 原来的组件实例会被复用
// 因为两个路由渲染了同个组件,复用高效
created() {
console.log('a',this.$route.params.id)
// 这个时候就只能打印一个id 要想点那个id打印那个id 我们要用watch监听 },
// watch: {
// // 监听 从哪个id变化成那个id
// $route: (to, from) => {
// console.log(to.params.id)
// console.log(from)
// // 监听 从哪个id变化成那个id 拿到id之后我们就可以发起ajax 请求后端接口数据 数据驱动视图
// }
// }
beforeRouteUpdate(to,from,next){
console.log(to.params.id)
// console.log(from)
// 一定要调用next 不然就阻塞(就是点不动了)
next();
} }
</script>
vue学习(十二)vue全家桶 Vue-router&Vuex的更多相关文章
- 已配置好的vue全家桶项目router,vuex,api,axios,vue-ls,async/await,less下载即使用
github 地址: https://github.com/liangfengbo/vue-cli-project 点击进入 vue-cli-project 已构建配置好的vuejs全家桶项目,统一管 ...
- vue学习(十二) 指令v-if v-show 控制页面标签的显示与隐藏
//html <div id="app"> <input type="button" value="toggle" @cl ...
- vue全家桶(Vue+Vue-router+Vuex+axios)(Vue+webpack项目实战系列之二)
Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了,直奔主题. 一.Vue 系列一已经用vue-cli搭建了Vue项目,此处就不赘述了. 二.Vue-router Vue的路由,先献上文档(http ...
- (转)SpringMVC学习(十二)——SpringMVC中的拦截器
http://blog.csdn.net/yerenyuan_pku/article/details/72567761 SpringMVC的处理器拦截器类似于Servlet开发中的过滤器Filter, ...
- 【实战】Vue全家桶(vue + axios + vue-router + vuex)搭建移动端H5项目
使用Vue全家桶开发移动端页面. 本博文默认已安装node.js. github链接 一.准备工作 安装vue npm install vue 安装脚手架vue-cli npm install -g ...
- 一个简单的假vue全家桶(vue+vue-router+require)
首先说明我觉得这是一个比较好理解的vue全家桶(虽然是假的),模块化也是用require来做的,而且如果后期有必要压缩我也会用gulp来做 1.依赖个个本地模块,require只是用来载入page,这 ...
- vue第十二单元(vue中过渡效果的实现)
第十二单元(vue中过渡效果的实现) #课程目标 熟练掌握transition组件的用法 熟练使用transition组件做过渡特效 熟练使用transition组件做动画特效 了解使用transit ...
- vue学习【二】vue结合axios动态引用echarts
大家好,我是一叶,本篇是vue学习的第二篇,本篇将要讲述vue结合axios动态引用echarts. 在vue中,异步刷新使用的是axios,类似于大家常用的ajax,其实axios已经是vue的第二 ...
- Vue(十二)vue实例的属性和方法
vue实例的属性和方法 1. 属性 vm.$el vm.$data vm.$options vm.$refs <!DOCTYPE html> <html lang="en& ...
- Vue学习(二):class与style绑定
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml&q ...
随机推荐
- day06 python 3中的编码
#python2 和 python3 的一些区别 ''' #python2 print('aaa') print'aaa' range() xrange()生成器 raw_input() #pytho ...
- 使用EA画流程图
https://www.sparxsystems.com.au/enterprise_architect_user_guide/13.0/model_domains/flow_chart.html
- JSON对象和字符串的收发(JS客户端用typeof()进行判断非常重要)
Ajax前台向后台传递对象: 数据准备 将js对象或者json对象转换为json字符串在Ajax传递,在后台中再将json字符串转换为json对象,再转换为java对象或在前端和后端构造一样的数据结构 ...
- 四、spring集成ibatis进行项目中dao层基类封装
Apache iBatis(现已迁至Google Code下发展,更名为MyBatis)是当前IT项目中使用很广泛的一个半自动ORM框架,区别于Hibernate之类的全自动框架,iBatis对数据库 ...
- 「Luogu P2568 GCD」
看到这是一道紫题还是和gcd有关的才点进来(毕竟数论只会gcd). 前置芝士 质数**(又称素数):因数只有1和本身,但是很特殊的1不是一个质数. gcd**:欧几里得算法,又称辗转相除法,可以在约为 ...
- oracle练习-day02
.查询员工表和部门表.查询出雇员的编号,姓名,部门的编号和名称,地址.查询出每个员工的上级领导.在上一个例子的基础上查询该员工的部门名称.在上一个例子的基础上查询员工工资等级和他的上级领导工资等级.查 ...
- 渗透测试神器Burp Suite v1.7.11发布(含下载)
BurpSuite是一款信息安全从业人员必备的集成型的渗透测试工具,它采用自动测试和半自动测试的方式,包含了Proxy,Spider,Scanner,Intruder,Repeater,Sequenc ...
- 最新版本GIT安装
版本问题,最直接的解决办法就是重新编辑安装git吧: 1. 下载:# wget -O git.zip https://github.com/git/git/archive/master.zip 2. ...
- MySQL性能调优语句
mysql>show global status; 可以列出MySQL服务器运行各种状态值 一.慢查询 mysql> show variables like '%slow%'; mysql ...
- linux下mysql允许远程连接
1. MySql安装教程 https://dev.mysql.com/doc/refman/5.7/en/linux-installation-yum-repo.html 默认情况下mysq的 roo ...