Vue router---路由器
2020-07-24 11:37
75 查看
第一步
1、安装:
npm install vue-router
cnpm install vue-router
yarn add vue-router
2、在新建router.js中引用如下代码:
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
3、在src中新建views文件夹,在view新建
例如:Home文件夹,在文件夹中新建index.vue
<template> <div id="home"> <Content /> </div> </template> <script> import Content from "../../components/Content.vue" export default { name: "index", data(){ return{ } }, components:{ Content, }, methods:{ } } </script> <style scoped> </style>
4、在router.js中设置如下两步
第一步:
import Home from './views/Home/'
第二步:
export default new VueRouter ({ routes: [ { path: '/', redirect: '/home' //设置默认指向 }, { path: '/home', component: Home } ] })
5、在App.vue中的div内引入
<router-view></router-view>
6、在main.js中
import router from ‘./router’
在new的实例中增加router,具体如下:
import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ render: h => h(App), router }).$mount('#app')
相关文章推荐
- CISCO路由器端口状态
- Cisco路由器上的IPSec协议(站点到站点的***)
- 局域网中代理服务器、路由器的配置方案
- 攻下隔壁女生的路由器后,我都做了什么
- 使用路由器让两台电脑同时用一个adsl账号上网
- 教你用大功率路由器实现覆盖3平方公里wix公众账号吸粉神器
- 华为AR28-31路由器的E1捆绑配置
- openwrt路由器的MTU设置问题
- 路由器原理及路由协议
- 一个简单的路由器试验
- 路由器无线网卡驱动自适应
- Cisco路由器安全配置必用10条命令
- linux 当路由器使用
- Cisco路由器或交换机上配置SNMP
- 2台路由器串联接法(有线路由+无线路由)
- linux下利用ADSL TPLink路由器 oray(花生壳软件)搭建网络服务器
- 网络设备集线器、交换机、路由器的理解
- (神州数码)路由器广域网PPP封装CHAP验证配置
- WiFi共享精灵与路由器