1.定义路由组件
在compoents文件夹下定义路由组件,如:HelloWorld.vue
2.引入路由组件(main.js)
import HelloWorld from './components/HelloWorld.vue'
3.配置路由(index.js)
const routes = [
{
path: '/',
redirect:'login' //重定向
},
//一级路由
{
path: '/HelloWorld',
name: 'HelloWorld',
component: () => import('./components/HelloWorld.vue')
}
]
4.实例化路由(index.js)
const router = new VueRouter({
routes
})
5.挂载到vue实例上(main.js)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
6.路由跳转
<div id="app">
<header>
//router-link 定义点击后导航到哪个路径下
<router-link to="/HelloWorld">Home</router-link>
</header>
</div>
7.路由出口
<div id="app">
<header>
//router-link 定义点击后导航到哪个路径下
<router-link to="/HelloWorld">Home</router-link>
</header>
//对应的组件内容渲染到router-view中
<router-view></router-view>
</div>