vue路由器配置

1.安装路由

（vue2安装3版本，vue3安装4版本的路由）

npm i vue-router@3

        1.1.在src文件夹中创建pages文件夹，存放路由组件

 

2.配置路由规则

        2.1在src创建一个router文件       

        index.js文件

//引入vue，vue-router是在vue基础上的，所以要引入vue
import Vue from 'vue';
//引入vue-router
import VueRouter from 'vue-router';
//注册
Vue.use(VueRouter);

//引入路由组件
import Home from '@/pages/Home';
import Search from '@/pages/Search';

export default new VueRouter({
        //配置路由
        routes:[
             {
                  path:'/home',
                  component:Home,
             },
             {
                  path:'/search',
                  component:Search,
             }    
               ]
      })

只要注册了路由，路由组件和非路由组件都可以使用$route和$router属性；

3.在main.js中注册router

import router from './router';
new Vue({
  render: h => h(App),
  //注册路由信息：当在这里书写router的时候，组件身上都拥有$route,$router属性
  router
}).$mount('#app')