vue 路由

 

 

import Vue from 'vue'
import VueRouter from 'vue-router'

import Login from "@/pages/Login/Login";
import Search from "@/pages/Search/Search";
import Home from '@/pages/Home/index'
import Register from '@/pages/Register/index'

// 使用VueRouter插件
Vue.use(VueRouter)
const router =new VueRouter({
    routes:[
        {
            path:'/Login',
            component:Login
        },
        {
            path:'/Search',
            component:Search
        },
        {
            path:'/Home',
            component:Home
        },
        {
            path:'/Register',
            component:Register
        },
        // 重定向，在项目跑起来的时候，访问/，立马让他定位到Home
        {
            path:'*',
            redirect:'/Home'
        }
    ]
})
export default router

二需要在main.js里导入路由组件

import Vue from 'vue'
import App from './App.vue'

// 引入路由组件
import router from "@/router";

// 三级联动路由组件
import TypeNav from '@/pages/Home/TypeNav'
// 第一个参数：全局组件的名字，第二个参数：哪一个组件
Vue.component(TypeNav.name,TypeNav)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')

<!--    路由组件利用</router-view>展示显示内容-->
    <router-view></router-view>

声明式路由  router-link，必须有to属性

<router-link to="/Login">登录</router-link>
<router-link to="/Register" class="register">免费注册</router-link>