vue-router
2020-07-24 12:32
84 查看
先讓大家看一下目錄結構。
1、安装: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,在index.vue放以下代碼
pa:要事先建好 Content
<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中设置如下两步
1.
import Home from './views/Home/'
2.
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,具体如下:
然後運行是這樣的。
相关文章推荐
- vue-router 路由元信息
- VUE项目起步时加载不出页面,router-view渲染不出页面
- vue-router 入门学习
- 【vue】vue-router的懒加载
- 【vue】vue-router的懒加载
- vue-router总结知识点
- vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
- vue+webpack+vue-router+vuex+ssr全解析笔记
- vue-router设置404失败
- vue-router路由
- vue-router: 路由传参
- 使用vue-router在Vue页面之间传递数据的方法
- vue-router新手指南
- Vue Router
- vue-router之to属性赋值
- vue-router 源码之实现一个简单的 vue-router
- vue-router组件内的导航守卫
- Vue.js路由组件vue-router使用方法详解
- vue-router路由懒加载
- 在使用vue-router遇到的问题以及解决办法