详解在vue-cli中使用路由


Posted in Javascript onSeptember 25, 2017

1.首先npm中是否有vue-router

一般在vue-cli的时候就已经下载好了依赖包了

2.使用vue的话正常的需要涉及这几个文件

demo/src/router/index.js

import Vue from 'vue'

import Router from 'vue-router'

import Hello from '../components/Hello'//首页

import Test from '../components/test'//需要跳转的页面 给组件重新命名

 

Vue.use(Router)

 

export default new Router({

 routes: [

  {//首页

   path: '/',

   name: 'Hello',

   component: Hello

  },

  {//需要跳转的页面

    path:'/test',

    name:'test',

    component:Test//组件名字

  }

 ]

})

demo/src/app.vue

<template>

 <div id="app">

  <img src="./assets/logo.png">

  <p>

  <router-link to="/home">home</router-link>//跳转首页

  <router-link to="/test">test</router-link>//跳转新页面

  </p>

  <router-view></router-view>//页面渲染放置的部分

 </div>

 

</template>

 

<script>

export default {

 name: 'app'

}

</script>

 

<style>

#app {

 font-family: 'Avenir', Helvetica, Arial, sans-serif;

 -webkit-font-smoothing: antialiased;

 -moz-osx-font-smoothing: grayscale;

 text-align: center;

 color: #2c3e50;

 margin-top: 60px;

}

</style>

demo/src/main.js

import Vue from 'vue'

import App from './App'

import router from './router'

 

Vue.config.productionTip = false

 

/* eslint-disable no-new */

new Vue({

 el: '#app',

 router,

 template: '<App/>',

 components: { App }

}).$mount('#app')//实例挂载到元素中

两个页面的组件

详解在vue-cli中使用路由

这样的话,基本的路由设置就好了,可以按照正常的npm run dev运行这个项目了

另外还有嵌套 自定义多种路由

具体的路由内容可以查看:https://router.vuejs.org/zh-cn/installation.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery tools 系列 scrollable(2)
Sep 06 Javascript
JQuery从头学起第二讲
Jul 04 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
编程语言JavaScript简介
Oct 16 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
Bootstrap一款超好用的前端框架
Sep 25 #Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 #Javascript
javascript input输入框模糊提示功能的实现
Sep 25 #Javascript
vue-cli中的webpack配置详解
Sep 25 #Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 #Javascript
react native与webview通信的示例代码
Sep 25 #Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 #Javascript
You might like
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
PHP之预定义接口详解
2015/07/29 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
python访问系统环境变量的方法
2015/04/29 Python
python中循环语句while用法实例
2015/05/16 Python
详解Swift中属性的声明与作用
2016/06/30 Python
python实现换位加密算法的示例
2018/10/14 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
快速查找Python安装路径方法
2020/02/06 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
python3中编码获取网页的实例方法
2020/11/16 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
广告传媒专业应届生求职信
2014/03/01 职场文书
学习经验演讲稿
2014/05/10 职场文书
小学捐书活动总结
2014/07/05 职场文书
法院授权委托书范文
2014/08/02 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
公证书
2019/04/17 职场文书