详解在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 相关文章推荐
Opacity.js
Jan 22 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
解决vue admin element noCache设置无效的问题
Nov 12 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 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
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
jquery 表单取值常用代码
2009/12/22 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
vue.js动画中的js钩子函数的实现
2018/07/06 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
puppeteer库入门初探
2019/01/09 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
Python httplib,smtplib使用方法
2008/09/06 Python
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
python实现远程控制电脑
2019/05/23 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
学习Python爬虫的几点建议
2020/08/05 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
自考毕业自我鉴定范文
2013/10/27 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
素质拓展训练感想
2015/08/07 职场文书
少先大队干部竞选稿
2015/11/20 职场文书