Vue路由组件

1.创建路由组件

路由组件一般与非路由组件区分，非路由组件放在component下，路由组件在src目录下新建一个文件夹views/pages存放。

2.路由组件配置

在src文件夹下新建router文件夹在其中建立index.js编写路由文件配置，配置代码如下：

// 配置路由的地方
import Vue from 'vue';
import VueRouter from 'vue-router';
//使用插件
Vue.use(VueRouter)
//引入路由组件
import Home from '@/pages/Home'
import Search from '@/pages/Search'
import Login from '@/pages/Login'
import Register from '@/pages/Register'
//配置路由
export default new VueRouter({
    //配置路由
    routes:[
        {
            path:"/Home",
            component:Home
        },
        {
            path:"/Search",
            component:Search
        },
        {
            path:"/Login",
            component:Login
        },
        {
            path:"/Register",
            component:Register
        },
    ]