一、知识点
- 先建一个
vue
文件 - 然后在
router.js
文件中,import
以及注册 - 最后在页面中用
router-link
使用该组件
二、具体步骤
1.先建一个vue
文件
<template>
<div>
hello info component
</div>
</template>
<script>
export default {
name: "info"
}
</script>
<style scoped>
</style>
2.然后在router.js
文件中,import
以及注册
-
首先
import Info from './views/Info.vue'
Info
后面注册的时候会用到,也就是component
。
'./views/Info.vue'
就是组件的路径 -
然后是注册:
path
这是个路径,后面在页面中router-link
引用插件的时候,会用到
name
好像没啥用
component
这里的值要和上面import
的值保持一致
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Info from './views/Info.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/info',
name: 'info',
component: Info
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
}
]
})
最后在页面中用 router-link
使用该组件
这里的 to="/info"
里的值就是router.js
文件配置里的path
,然后在浏览器中的路径也是这个路径
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/info">Info</router-link>
</div>
<router-view/>
</div>
</template>