1 import Vue from 'vue'
2 import VueRouter from 'vue-router'
3
4 import Login from "@/pages/Login/Login";
5 import Search from "@/pages/Search/Search";
6 import Home from '@/pages/Home/index'
7 import Register from '@/pages/Register/index'
8
9 // 使用VueRouter插件
10 Vue.use(VueRouter)
11 const router =new VueRouter({
12 routes:[
13 {
14 path:'/Login',
15 component:Login
16 },
17 {
18 path:'/Search',
19 component:Search
20 },
21 {
22 path:'/Home',
23 component:Home
24 },
25 {
26 path:'/Register',
27 component:Register
28 },
29 // 重定向，在项目跑起来的时候，访问/，立马让他定位到Home
30 {
31 path:'*',
32 redirect:'/Home'
33 }
34 ]
35 })
36 export default router
二需要在main.js里导入路由组件
1 import Vue from 'vue'
2 import App from './App.vue'
3
4 // 引入路由组件
5 import router from "@/router";
6
7 // 三级联动路由组件
8 import TypeNav from '@/pages/Home/TypeNav'
9 // 第一个参数：全局组件的名字，第二个参数：哪一个组件
10 Vue.component(TypeNav.name,TypeNav)
11 Vue.config.productionTip = false
12
13 new Vue({
14 render: h => h(App),
15 router:router
16 }).$mount('#app')
<!-- 路由组件利用</router-view>展示显示内容-->
<router-view></router-view>
声明式路由 router-link，必须有to属性
1 <router-link to="/Login">登录</router-link>
2 <router-link to="/Register" class="register">免费注册</router-link>
