Vue项目中引入全局路由

先讲讲全局引入，再聊聊如何使用吧。

首先在src文件下创建router文件,router文件中创建index.js

1.在index.js中配置好需要的路由.

代码：

//配置路由的地方
import Vue from 'vue';
import VueRouter from 'vue-router';



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


//配置路由



const router = new VueRouter({
    //配置路由
    routes: [
        {
            path: '/home',
            component: Home
        },
        {
            path: '/search',
            component: Search
        },
        {
            path: '/login',
            component: Login
        },
        {
            path: '/register',
            component: Register
        }
    ]
})


export default router

 简单的聊聊:

import VueRouter from 'vue-router';    引入，  路由本身就是一个构造函数,配置好key-value形式                

• 1.一个路由就是一组映射关系(key-value)
• 2.key为路径,value可能是function或者component

 

 

2.使用配置好的路由,在入口文件main.js中引入使用.

代码:

import Vue from 'vue'
import App from './App.vue'
//index.js里配置的路由要在路口文件引入
import VueRouter from 'vue-router'

//引入路由器
import router from './router'

Vue.config.productionTip = false


Vue.use(VueRouter)

new Vue({
  render: h => h(App),
  //注册路由  [底下的写法是kv一致,省略router小写]
  //注册完之后,组件身上都拥有$route,$router属性     
  router:router
}).$mount('#app')

简单聊聊:

//index.js里配置的路由要在路口文件引入
import VueRouter from 'vue-router'

引入完之后就可注册了。

new Vue({
  render: h => h(App),
  //注册路由  [底下的写法是kv一致,省略router小写]
  //注册完之后,组件身上都拥有$route,$router属性     
  router:router
}).$mount('#app')

这样路由配置就基本完成了，