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
        },
    ]
})

3.注册路由

在main.js文件下

import Vue from 'vue'
import App from './App.vue'
//引入路由
import router from '@/router';
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 注册路由：底下的写法kv一致省略v【router小写的】
  router
}).$mount('#app')

最后在app.vue引入路由出口

别忘了先在项目里npm install --save vue-router