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. P1600 天天爱跑步[桶+LCA+树上差分]

    题目描述 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.<天天爱跑步>是一个养成类游戏,需要玩家每天按时上线,完成打卡任务. 这个游戏的地图可以看作一一棵 ...

  2. 《3+1团队》【Beta】Scrum meeting 1

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 3+1团队 团队博客地址 https://home.cnblogs.com/u/3-1group ...

  3. 关于jquery的事件委托-bind,live,delegate,on的区别发展

    1.bind()方法 (只能给已经存在的元素上绑定事件) 只能给调用它的时候已经存在的元素绑定事件,不能给未来新增的元素绑定事件. $('ul li').bind('click', function( ...

  4. Vue中的插槽---slot

    一:什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. 插槽显不显示.怎样显示是由 ...

  5. MySql数据库导出完整版(导出数据库,导出表,导出数据库结构)

    MySql数据库导出完整版(导出数据库,导出表,导出数据库结构) 用MySqlCE导出数据库脚本时,如数据库中包含中文内容,则导出异常. 现在可以通过mysqldump.exe直接导出数据库脚本步骤如 ...

  6. set/priority_queue的运算符重载

    #include<bits/stdc++.h> using namespace std; struct cmp { bool operator ()(int a, int b) //重载小 ...

  7. Oracle中日期作为条件的查询

    1.范围日期的查询: select * from goods where g_time betweento_date('2018/12/26 10:01:59','yyyy-MM-dd hh:mi:s ...

  8. jumpserver 安装

    # CentOS 7 安装jumpserver $ setenforce 0 # 可以设置配置文件永久关闭$ systemctl stop iptables.service$ systemctl st ...

  9. [学习笔记]约数&欧拉函数

    约数 一.概念 约数,又称因数.整数a除以整数b(b≠0) 除得的商正好是整数而没有余数,我们就说a能被b整除,或b能整除a.a称为b的倍数,b称为a的约数. 二.性质 1.整数唯一分解 1)定义 对 ...

  10. PHP流程控制之goto语法

    自 PHP 5.3.0 起,还可以使用 goto 来跳出循环. 在本章开始的章节,我们讲解到一个故事,王同学每周往返,但有一个特例:直线电机滑台 项目失败后或者集团临时除知除外,他就可以不再这么每周往 ...