Vue 路由配置、动态路由
1.安装
npm install vue-router --save / cnpm install vue-router --save
2、引入并 Vue.use(VueRouter) (main.js)
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3、配置路由
1、创建组件 引入组件
2、定义路由 (建议复制)
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{ path: '*', redirect: '/home' } /*默认跳转路由*/
]
3、实例化VueRouter
const router = new VueRouter({
routes // (缩写)相当于 routes: routes
})
4、挂载
new Vue({
el: '#app',
router,
render: h => h(App)
})
5 、根组件的模板里面放上这句话 <router-view></router-view>
6、路由跳转
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
注:路由可以单独封装js文件应用
路由传值
1.动态路由
配置:{ path: '/luyou2/:aid', component: luyou2 },
接收:mounted(){console.log(this.$route.params);}
2.get传值
配置:{ path: '/luyou1', component: luyou1 },
接收:mounted(){console.log(this.$route.query);}
Vue 路由配置、动态路由的更多相关文章
- Nuxt配置动态路由以及参数校验
动态路由就是带参数的路由.比如我们商品列表里很多商品详细页,这时候就需要动态路由的帮助了. 比如我们新建一个commodity文件夹,新建一个index.vue 文件,然后新建一个_id.vue (以 ...
- vue根据后端菜单自动生成路由(动态路由)
vue根据后端菜单自动生成路由(动态路由) router.js import Vue from 'vue' import Router from 'vue-router' import store f ...
- 网络工程实训_4RIP路由(动态路由)
实验4:RIP路由.包括RIPv1:RIPv2 动态路由协议包括距离向量路由协议和链路状态路由协议.RIP(Routing Information Protocol,路由信息协议)是使用最广泛的距离向 ...
- CCNA - Part12 - 路由协议 (1) - 静态路由,动态路由 RIP
路由器 在之前关于路由器的介绍中,我们知道它是网络互联的核心设备,用于连接不同的网络,在网络之间转发 IP 数据报.对于路由器来说,路由表是其内部最为重要的构成组件.当路由器需要转发数据时,就会按照路 ...
- nodejs之express路由与动态路由
1.快速创建express项目步骤 /** * 1.cd 到项目里面 * 2.npm init --yes 创建package.json文件 * 3.安装express * npm install e ...
- vue+iview实现动态路由和权限验证
github上关于vue动态添加路由的例子很多,本项目参考了部分项目后,在iview框架基础上完成了动态路由的动态添加和菜单刷新.为了帮助其他需要的朋友,现分享出实现逻辑,欢迎一起交流学习. Gith ...
- Angular配置路由以及动态路由取值传值跳转
Angular配置路由 1.找到 app-routing.module.ts 配置路由 引入组件 import { HomeComponent } from './home/home.componen ...
- 使用Gateway配置路由以及动态路由
1. 新建module cloud-gateway-gateway9527 2. pom.xml <!--注意不需要web模块依赖,否则报错--> <?xml version=&qu ...
- Reactjs之静态路由、动态路由以及Get传值以及获取
1.新增知识点 /* react路由的配置: 1.找到官方文档 https://reacttraining.com/react-router/web/example/basic 2.安装 cnpm i ...
- IP路由__动态路由
1.使用协议来查找网络并更新路由表的配置,就是动态路由.它比使用静态或默认路由方便,但它需要一定的路由器CPU处理时间和网络链接带宽.路由协议定义了路由器与相邻路由器通信时所使用的一组规则. 在互联网 ...
随机推荐
- 等比例缩放图片(C#)
private Bitmap ZoomImage(Bitmap bitmap, int destHeight, int destWidth) { try { System.Drawing.Image ...
- [ML] 解决样本类别分布不均衡的问题
转自:3.4 解决样本类别分布不均衡的问题 | 数据常青藤 (组织排版上稍有修改) 3.4 解决样本类别分布不均衡的问题 说明:本文是<Python数据分析与数据化运营>中的“3.4 解决 ...
- Python中的import
模块(module):用来从逻辑(实现一个功能)上组织Python代码(变量.函数.类),本质就是*.py文件.文件是物理上组织方式"module_name.py",模块是逻辑上组 ...
- STM32 RTC时钟的配置
1) 使能电源时钟和备份区域时钟. RCC_APB1PeriphClockCmd(RCC_APB1Periph_PWR | RCC_APB1Periph_BKP, ENABLE); //使能电源时钟和 ...
- [LeetCode&Python] Problem 566. Reshape the Matrix
In MATLAB, there is a very useful function called 'reshape', which can reshape a matrix into a new o ...
- 一定要记住这20种PS技术,让你的照片美的不行! - imsoft.cnblogs
照片名称:调出照片柔和的蓝黄色-简单方法, 1.打开原图素材,按Ctrl + J把背景图层复制一层,点通道面板,选择蓝色通道,图像 > 应用图像,图层为背景,混合为正片叠底,不透明度50%,反相 ...
- php-fpm配置及操作
启动与停止 启动 /usr/local/php/sbin/php-fpm 停止 pkill php-fpm
- HDU 1233:还是畅通工程(最小生成树)
还是畅通工程 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- C4D 计算体积和表面积插件
前段时间,由于有个模型要做3D打印,所以需要知道模型的体积以及表面积,以便计算价格. 我用的是C4D,恕我愚昧,在C4D上没找到自带的. 在网上找了好久,才找到一个由法国开发名为aire_volume ...
- dbt macro 说明
macro是SQL的片段,可以像模型中的函数一样调用.macro可以在模型之间重复使用SQL,以符合DRY(不要重复自己)的工程原理. 此外,共享包可以公开您可以在自己的dbt项目中使用的macro. ...