vue-cli + vue router

官网地址

https://router.vuejs.org/zh-cn/

准备工作:

a、main.js添加路由文件,并挂接在实例内
import router from './router/index'
b、index.js添加组件,并设置路由
import Code from '../components/Code'
import Slide from '../components/Slide'

第 1 步

在App.vue文件内添加以下代码,用于展示路由对应的组件内容

第 2 步

导入Router.vue文件,并挂接到组件上
import RouteComponent from './components/Router.vue'
components: { RouteComponent }

第 3 步

在Router.vue文件内拼接router-link
{{ i.name }}

第 4 步

在Code.vue中添加组件内容

this is show a demo : {{ name }}

项目代码有详细解释,在此是把大体思路捋一遍

https://github.com/DINLiang/vue-demo

你可能感兴趣的:(vue-cli + vue router)