详解在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创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
js实现YouKu的漂亮搜索框效果
Aug 19 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
axios学习教程全攻略
Mar 26 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 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
东方红 - 来复式再生机的修复
2021/03/02 无线电
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
浅说js变量
2011/05/25 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
python线程锁(thread)学习示例
2013/12/04 Python
python类和函数中使用静态变量的方法
2015/05/09 Python
Python操作列表之List.insert()方法的使用
2015/05/20 Python
python 写的一个爬虫程序源码
2016/02/28 Python
使用Python生成XML的方法实例
2017/03/21 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
python批量爬取下载抖音视频
2019/06/17 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
详解python变量与数据类型
2020/08/25 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
介绍一下Python中webbrowser的用法
2013/05/07 面试题
生产车间主管岗位职责
2013/12/28 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL