$route

1. route是单个路由,存放当前路径信息,携带的参数

$router

1. 管理整个路由系统,里面保存所有的路径信息,能够实现路由的跳转

二，基本配置

前期准备：安装vue-router 全局配置，命令： npm i vue-router （默认安装的是4版本适配的是vue3，如果使用的是vue2的话，必须选定3版本 npm i vue-router@3。

第一步: 在main.js文件中引入并使用插件】

// 第一步: 引入router 插件
import VueRouter from 'vue-router'
// 使用插件
Vue.use(VueRouter)

第二步: 在src文件夹下创建一个router文件夹然后在文件夹下创建index.js

index.js中写路由的核心代码

// 该文件是专门用于创建整个应用的路由器
 
// 第一步引入插件(本质是一个构造函数)
import VueRouter from 'vue-router'
// 引入一下用到的组件 
import About from '../components/About'
// 第二步创建router实例对象并暴露
export default new VueRouter({
    routes: [
        {
            // path是路径
            path: "/about",
            //跳转的组件
            component: About
        },       
    ]
})
// 然后去main.js中引入router实例

第三步: 回到main.js中引入创建的 router 并在vue实例对象中使用

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App'
// 第一步: 引入router 插件
import VueRouter from 'vue-router'
// 使用插件
Vue.use(VueRouter)
// 第二步: 创建router文件夹 引入实例
import router from './router'
// 关闭生产提示
Vue.config.productionTip = false
 
// 创建vm
new Vue({
    // 指定容器
    el: '#app',
    // 解析App模板
    render: h => h(App),
    // 使用路由
    router
})

0 条评论