详解在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 前的按键判断代码
Mar 19 Javascript
Js基础学习资料
Nov 23 Javascript
js读写json文件实例代码
Oct 21 Javascript
常用的JavaScript WEB操作方法分享
Feb 28 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
ajax前台后台跨域请求处理方式
Feb 08 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 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
PHP去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
php eval函数用法总结
2012/10/31 PHP
php加密解密实用类分享
2014/01/07 PHP
2014过年倒计时示例
2014/01/31 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
python logging设置level失败的解决方法
2020/02/19 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
经典c++面试题三
2015/07/08 面试题
某同学的自我鉴定范文
2013/12/26 职场文书
房屋委托书范本
2014/04/04 职场文书
关于感谢信的范文
2015/01/23 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
比较node.js和Deno
2021/04/27 Javascript
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers