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 声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切 ...
随机推荐
- 云计算---记一次黑客攻击openstack创建的虚拟机
一:问题定位 现象: 近期发现有几台openstack云主机被修改密码并被肉鸡. 黑客操作日志: -- :: ##### root tty1 : #### -- :: top -- :: ##### ...
- 题解 UVa11388
题目大意 \(T\) 组数据,每组数据给定两个整数 \(G,L\),输出数对 \(x,y\) 满足 \(GCD(x,y)=G,LCM(x,y)=L\) 且 \(x\) 最小.若无解则输出 \(-1\) ...
- JavaScript倒计时并刷新页面
//10秒倒计时效果自动补全09,08等<div id="we">10</div>s <script> window.onload = func ...
- HDU - 4352 - XHXJ's LIS(数位DP)
链接: https://vjudge.net/problem/HDU-4352 题意: a 到 b中一个数组成递增子序列长度等于k的数的个数 思路: 因为只有10个数,使用二进制维护一个递增序列,每次 ...
- LightOJ - 1245 - Harmonic Number (II)(数学)
链接: https://vjudge.net/problem/LightOJ-1245 题意: I was trying to solve problem '1234 - Harmonic Numbe ...
- 洛谷 P1279 字串距离 题解
每日一题 day24 打卡 Analysis 字符串+dp 仔细观察发现,对于f[i][j],它的值为以下三个值中的最小者: f[i-1][j]+k //a[i]对应空格 f[i][j-1]+k // ...
- 021_Python3 OS 文件/目录方法
os 模块提供了非常丰富的方法用来处理文件和目录.常用的方法如下表所示: 序号 方法及描述 1 os.access(path, mode) 检验权限模式 2 os.chdir(path) 改变当前 ...
- 017_Python3 数据结构
本章节我们主要结合前面所学的知识点来介绍Python数据结构. ***************************** 1.列表 Python中列表是可变的,这是它区别于字符串和元组的最重 ...
- admin站点管理
admin中的显示 class Saltstack_GroupAdmin(admin.ModelAdmin): list_display = ['group_name','salt_minion_id ...
- 用es实现模糊搜索
Haystack为Django提供了模块化的搜索.它的特点是统一的,熟悉的API,可以让你在不修改代码的情况下使用不同的搜索后端(比如 Solr, Elasticsearch, Whoosh, Xap ...