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模式的更多相关文章

  1. vue路由-编程式导航

    除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router.push(location, onComp ...

  2. Vue 路由的编程式导航与history模式

    编程式导航 注意:官方文档写错了 通过javascript跳转 //第一种跳转方式 // this.$router.push({ path: 'news' }) // this.$router.pus ...

  3. VueRouter爬坑第四篇-命名路由、编程式导航

    VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...

  4. vue编程式导航,命名路由

    //使用 window.location.href 的形式,叫做 编程式导航 绑定事件的形式 <template> <div class="goods-item" ...

  5. vue动态路由传值以及get传值及编程式导航

    1.动态路由传值 1.配置路由处 { path: '/content/:id', component: Content }, // 动态路由 2.对应页面传值 <router-link :to= ...

  6. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  7. vue编程式导航

    vue项目中使用到了组件间传值,通过路由跳转实现从产品页进入产品详情页查看功能. 使用了this.$router.push(编程式导航) product页面中:因为只需要遮住产品列表页来显示产品详情页 ...

  8. [vue]声明式导航和编程式导航

    声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切换 区别: 写法不一样,声明式导航是写在组件的template中,通过router-link来触发,编程式导航写在js函数中, ...

  9. vue中声明式导航和编程式导航

    官方文档:https://router.vuejs.org/zh-cn/essentials/navigation.html 声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切 ...

随机推荐

  1. 云计算---记一次黑客攻击openstack创建的虚拟机

    一:问题定位 现象: 近期发现有几台openstack云主机被修改密码并被肉鸡. 黑客操作日志: -- :: ##### root tty1 : #### -- :: top -- :: ##### ...

  2. 题解 UVa11388

    题目大意 \(T\) 组数据,每组数据给定两个整数 \(G,L\),输出数对 \(x,y\) 满足 \(GCD(x,y)=G,LCM(x,y)=L\) 且 \(x\) 最小.若无解则输出 \(-1\) ...

  3. JavaScript倒计时并刷新页面

    //10秒倒计时效果自动补全09,08等<div id="we">10</div>s <script> window.onload = func ...

  4. HDU - 4352 - XHXJ's LIS(数位DP)

    链接: https://vjudge.net/problem/HDU-4352 题意: a 到 b中一个数组成递增子序列长度等于k的数的个数 思路: 因为只有10个数,使用二进制维护一个递增序列,每次 ...

  5. LightOJ - 1245 - Harmonic Number (II)(数学)

    链接: https://vjudge.net/problem/LightOJ-1245 题意: I was trying to solve problem '1234 - Harmonic Numbe ...

  6. 洛谷 P1279 字串距离 题解

    每日一题 day24 打卡 Analysis 字符串+dp 仔细观察发现,对于f[i][j],它的值为以下三个值中的最小者: f[i-1][j]+k //a[i]对应空格 f[i][j-1]+k // ...

  7. 021_Python3 OS 文件/目录方法

    os 模块提供了非常丰富的方法用来处理文件和目录.常用的方法如下表所示: 序号 方法及描述 1 os.access(path, mode) 检验权限模式   2 os.chdir(path) 改变当前 ...

  8. 017_Python3 数据结构

    本章节我们主要结合前面所学的知识点来介绍Python数据结构.   *****************************   1.列表 Python中列表是可变的,这是它区别于字符串和元组的最重 ...

  9. admin站点管理

    admin中的显示 class Saltstack_GroupAdmin(admin.ModelAdmin): list_display = ['group_name','salt_minion_id ...

  10. 用es实现模糊搜索

    Haystack为Django提供了模块化的搜索.它的特点是统一的,熟悉的API,可以让你在不修改代码的情况下使用不同的搜索后端(比如 Solr, Elasticsearch, Whoosh, Xap ...