Vue路由编程式导航以及hash模式
import Vue from 'vue';
import App from './App.vue'; //引入公共的scss 注意:创建项目的时候必须用scss import './assets/css/basic.scss'; //请求数据 import VueResource from 'vue-resource';
Vue.use(VueResource); import VueRouter from 'vue-router'; Vue.use(VueRouter); //1.创建组件 import Home from './components/Home.vue'; import News from './components/News.vue'; import Content from './components/Content.vue'; //2.配置路由 注意:名字 const routes = [
{ path: '/home', component: Home },
{ path: '/news', component: News,name:'news' }, { path: '/content/:aid', component: Content }, /*动态路由*/ { path: '*', redirect: '/home' } /*默认跳转路由*/
] //3.实例化VueRouter 注意:名字 const router = new VueRouter({
mode: 'history', /*hash模式改为history*/
routes // (缩写)相当于 routes: routes
}) //4、挂载路由 new Vue({
el: '#app',
router,
render: h => h(App)
}) //5 <router-view></router-view> 放在 App.vue
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="home">
我是首页组件 <button @click="goNews()">通过js跳转到新闻页面</button> </div>
</template> <script>
export default{
data(){
return {
msg:'我是一个home组件' }
},
methods:{ goNews(){ // 注意:官方文档写错了 //第一种跳转方式 // this.$router.push({ path: 'news' }) // this.$router.push({ path: '/content/495' }); //另一种跳转方式 // { path: '/news', component: News,name:'news' }, // router.push({ name: 'news', params: { userId: 123 }}) this.$router.push({ name: 'news'}) }
}
} </script> <style lang="scss" scoped> </style>
Vue路由编程式导航以及hash模式的更多相关文章
- vue路由-编程式导航
除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router.push(location, onComp ...
- Vue 路由的编程式导航与history模式
编程式导航 注意:官方文档写错了 通过javascript跳转 //第一种跳转方式 // this.$router.push({ path: 'news' }) // this.$router.pus ...
- VueRouter爬坑第四篇-命名路由、编程式导航
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
- vue编程式导航,命名路由
//使用 window.location.href 的形式,叫做 编程式导航 绑定事件的形式 <template> <div class="goods-item" ...
- vue动态路由传值以及get传值及编程式导航
1.动态路由传值 1.配置路由处 { path: '/content/:id', component: Content }, // 动态路由 2.对应页面传值 <router-link :to= ...
- [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦
一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...
- vue编程式导航
vue项目中使用到了组件间传值,通过路由跳转实现从产品页进入产品详情页查看功能. 使用了this.$router.push(编程式导航) product页面中:因为只需要遮住产品列表页来显示产品详情页 ...
- [vue]声明式导航和编程式导航
声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切换 区别: 写法不一样,声明式导航是写在组件的template中,通过router-link来触发,编程式导航写在js函数中, ...
- vue中声明式导航和编程式导航
官方文档:https://router.vuejs.org/zh-cn/essentials/navigation.html 声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切 ...
随机推荐
- Systemweaver — 电子电气协同设计研发平台
当前电子电气系统随着功能安全.AutoSAR.车联网.智能驾驶等新要求,导致其复杂性.关联性日益上升.当前,传统基于文档的设计由于其低复用性.无关联性.无协同性等缺点,已经无法适应日益 ...
- samba 问题解决
问题1:使用cifscreds 命令提示 You already have stashed credentials for bash-4.2$ cifscreds add 172.24.8.11 Yo ...
- 《hello-world》第九次团队作业:【Beta】Scrum meeting 2
项目 内容 这个作业属于哪个课程 2016级计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 实验十三 团队作业9:Beta冲刺与团队项目验收 团队名称 <hello--wor ...
- docker 进程 转载:
今天我们会分析Docker中进程管理的一些细节,并介绍一些常见问题的解决方法和注意事项. 容器的PID namespace(名空间) 在Docker中,进程管理的基础就是Linux内核中的PID名空间 ...
- TVS瞬态抑制二极管选型指南
一.TVS二极管工作原理 TVS(Transient Voltage Suppressors)二极管,即瞬态电压抑制器,又称雪崩击穿二极管,是采用半导体工艺制成的单个PN结或多个PN结集成的器件.TV ...
- Hive节点及原理
1.什么是Hive:hive是一种基于hadoop的数据仓库,能够将结构化的数据映射成一张表,并提供HQL进行查询.其数据是存储在hdfs上,本质是将sql命令转化成MapReduce来执行. 2.H ...
- [NgRx] Optimistically Editing Entity Data
First thing first, let's define a action to update entity: import { createAction, props } from " ...
- 五.划分LVM逻辑卷
作用: 1.整合分散的空间 2.空间可以进行扩大 零散空闲存储 ---- 整合的虚拟磁盘 ---- 虚拟的分区 由众多的物理卷(PV)组合成卷组(VG),从卷组中划分多个逻辑卷(L ...
- 给各阶段java学习者的建议[转]
第一部分:零基础或基础薄弱的同学这部分主要适用于尚未做过Java工作的同学,包括一些在校生以及刚准备转行Java的同学.一.Java基础首先去找一个Java的基础教程学一下,这里可以推荐达内java课 ...
- 数据结构实验之排序五:归并求逆序数(SDUT 3402)
归并排序详解(戳我). 以下是搬了别人的. #include<stdio.h> #include<stdlib.h> long long sum = 0; int a[1000 ...