vue-router路由
时间:2020-05-19
本文章向大家介绍vue-router路由,主要包括vue-router路由使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
先创建一个vue-cli项目,在该项目下完成以下操作。
安装
vue-router是一个插件包,所以我们还是需要用npm/cnpm来进行安装。
在IDEA下的命令行输入:
npm install vue-router --sace-dev
(如果出现错误,按照提示解决即可)
下载成功后会在node_moudles包里出现vue-router文件。
然后在main.js里导入vue-router
import VueRouter from 'vue-router'
并显示声明使用Vuerouter
Vue.use(VueRouter);
测试
-
先删除没有用的东西
-
components 目录下存放我们自己编写的组件
-
定义一个Content.vue 的组件
<template> <div> <h1>内容页</h1> </div> </template> <script> export default { name: "Content" } </script> <style scoped> </style>
-
安装路由,在src目录下,新建一个router文件夹,专门存放路由。在里面创建index.js
import Vue from "vue" //导入路由插件 import Router from 'vue-router' //导入上面定义的组件 import Content from '../components/Content' //安装路由 Vue.use(Router); //配置路由 export default new Router({ routes:[ { //路由路径 path:'/content', //路由名称 name:'Content', //可省略 //跳转到组件 component:Content } ] })
-
在 main.js 中配置路由
import Vue from 'vue' import App from './App' //自动扫描里面的路由配置 import router from './router' Vue.config.productionTip = false; new Vue({ el: '#app', //配置路由 router:router, components: { App }, template: '<App/>' });
-
在 App.vue 中使用路由
<template> <div id="app"> <router-link to="/content">首页</router-link> <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>
router-link:默认会被渲染成一个a标签,to属性为指定链接
router-view:用于渲染路由匹配到的组件
最终效果如下:
点击链接会出现下方文字
原文地址:https://www.cnblogs.com/hellowen/p/12919349.html
- 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 数组属性和方法
- 【DB笔试面试849】在Oracle中,在没有配置ORACLE_HOME环境变量的情况下,如何获取ORACLE_HOME目录?
- 算法和数据结构: 九 平衡查找树之红黑树
- 算法和数据结构: 七 二叉查找树
- Python 面向对象编程(下篇)
- 算法和数据结构: 符号表及其基本实现
- 算法和数据结构:堆排序
- mysql 优化海量数据插入和查询性能
- 聊聊dubbo-go的DubboPackage
- mysql行转列,列转行
- js异步编程
- C# SpinWait
- R:STRINGdb包用于string蛋白互作分析
- ManualResetEvent
- 非阻塞式的原子性操作-CAS应用及原理
- MySQL索引原理以及查询优化