路由配置
时间:2019-11-12
本文章向大家介绍路由配置,主要包括路由配置使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
安装完 Node.js 和 npm/cnpm 后。通过命令控制面板:
1,创建 webpack 模板的新项目:vue init webpack my-project
2,进入项目:cd my-project
3,安装依赖包:cnpm install + 回车 (淘宝镜像使用) / npm install (下载国外的npm才使用)
4,运行项目:npm run dev
5,知道 localhost:8080可以访问,再进行以下配置。
首先必须在url/pages/demo2/index.vue 创建 index.vue,如下index.vue代码:
<template> <h3>我爱你</h3> </template> <script> export default{ data(){ return{ } }, beforeCreate(){ console.log("beforeCreate"); }, created(){ console.log('created'); }, beforeMount(){ console.log('beforeMount'); }, mounted(){ console.log('mounted'); }, beforeDestory(){ console.log('beforeDestory'); }, destoryed(){ console.log('destoryed'); } } </script>
router文件夹下面的index.js,即路由的配置:
import Vue from 'vue' import Router from 'vue-router' // @代表src目录 import HelloWorld from '@/components/HelloWorld' //这是第二种导入方式,所有版本都支持。 import Demo1 from '@/pages/demo1/index.vue' //如果页面的名称是index.vue,那么可以直接省略该页面。 //如:import Demo2 from '@/pages/demo2' 前提是必须先创建一个index.vue文件才行 import Demo2 from '@/pages/demo2/index.vue' Vue.use(Router) export default new Router({ routes: [ //下面每一个{}都是在配置一个路由。 { /** * 斜杆表示一个页面,就是component:HelloWorld * 斜杆 表示根目录,如果斜杆后面没有输入其他东西,默认就是进入默认页面。 */ path: '/', name: 'HelloWorld', /*页面的名称*/ /*component 组件 成分 组成部分 英 /kəmˈpəʊnənt/ *component:HelloWorld,并不是说HelloWorld文件在components目录下。 *这里仅仅表达的是:HelloWorld是一个组成部分。 *这里的文件是有上面 inport 进行导入的:import HelloWorld from '@/components/HelloWorld' * @ 表示 src 目录 即:'src/components/HelloWorld' */ component: HelloWorld }, /* { path:'/demo1', name:'demo1', // 第一种引入路劲,有一些版本不支持该方式,所以不推荐使用。如下: component:require("@pages/demo1/index.vue") }*/ { path:'/demo1',//地址栏根目录后面,即斜杆后面输入该内容就会跳跳转到绑定的页面。 name:'index',//这只是一个别名,暂时用不到。 component:Demo1 //这里的绑定的Demo1是指:上面import进行导入指定路径的页面。 }, { path:'/demo2',//地址栏根目录后面,即斜杆后面输入该内容就会跳跳转到绑定的页面。 name:'index',//这只是一个别名,暂时用不到。 component:Demo2 //这里的绑定的Demo1是指:上面import进行导入指定路径的页面。 } ] })
其他注意点:
<template> <div id="app"> <!-- 运行时,页面会出现一个 V 形图标,就是在这里给添加的,所以,删除即可。 --> <!-- <img src="./assets/logo.png"> --> <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>
原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/11844901.html
- java面试基础知识(一)
- Linq 实现 DataTable 行转列
- sql常用的系统存储过程
- 用DPDK rte_ring实现多进程间通信
- sqlserver 的事务和c#的事务
- Flink DataStream编程指南
- oracle建表、建主键、外键基本语法
- F-Stack KNI配置注意事项
- F-Stack 助力 HTTP 网络服务器性能提升
- How to build Multi-Language Web Sites with ASP.NET 2.0 and VS.Net 2005
- 动态生成TreeView方法(二)
- Gradle打jar包如何上传到maven本地库
- POJO应用框架:Spring与EJB3.0的比较
- spring Boot 整合mybatis 如何使用多数据源
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Eureka 的服务发现 Discovery 简单配置
- python自动化之JS处理滚动条
- Docker 中启动 ZooKeeper
- 将MySQL复制限制为基于行的事件
- 在tinycorelinux上安装lxc,lxd (1)
- Ubuntu16.04下安装python3.6
- Mybatis 注解
- Python如何使用Matplotlib的作图
- 在tinycolinux上组建子目录引导和混合32位64位的rootfs系统
- 微服务中的负载均衡简单实现
- 3分钟短文:素未谋面,Laravel数据库模型初阶入门
- 在tinycolinux上编译seafile
- Alink漫谈(二十一) :回归评估之源码分析
- Linux环境下通过GDB调试C项目实战
- Alink漫谈(二十二) :源码分析之聚类评估