vue中配置路由的详细步骤

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>