vue-router的基本使用

vue-router的基本使用

介绍

Vue Router 是 Vue.js 的官方路由。它和vue.js是深度集成的,适合用于构建单页面应用。

安装

vue2.0安装vue-router(只能使用vue-router3.x版本)

你可以通过以下命令安装v3.x的最新版本,其中 -S 的意思是自动把模块和版本号添加到dependencies下

npm install vue-router -S

当然你还可以指定版本号安装,例如 我将要安装版本号为3.5.2的vue-router

npm install vue-router@3.5.2 -S

vue3.0安装vue-router

你可以通过一下命令安装v4.x的最新版本,其中 -S 的意思是自动把模块和版本号添加到dependencies下

npm install vue-router@4 -S

当然你还可以指定版本号安装,例如 我将要安装版本号为4.1.0的vue-router

npm install vue-router@4.1.0 -S

使用演示(vue2.0)

  1. src 源代码目录下,新建 router/index.js 路由模块,并初始化如下代码

    // 1. 导入 Vue 和 VueRouter 的包
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    // 2. 调用 Vue.use() 函数,把 VueRouter 安装为 Vue 的插件
    Vue.use(VueRouter)
    
    // 3. 创建路由的实例对象
    const router = new VueRouter()
    
    // 4. 向外共享路由的实例对象
    export default router
  2. src/main.js 中导入路由模块(获得路由的实例对象)

    import Vue from 'vue'
    import App from './App.vue'
    import router from '@/router/index.js' // 导入路由模块
    
    Vue.config.productionTip = false
    
    new Vue({
     render: h => h(App),
     router: router // 挂载路由模块
    }).$mount('#app')
    
  3. src/components/tabs 下新建四个模块,分别为 HomePage.vue 、Product.vue 、About.vue 、Contact.vue

  4. 复制以下代码到 src/App.vue 组件中。

    我们不必关心css样式,我们只需要关心以下代码中 template 标签中的内容。

    使用 vue-router 提供的 声明路由链接和占位符,其中 你可以把它当成 标签来看。

    
    
    
    
    
    

  5. src/router/index.js 路由模块中,通过 router 数组声明路由的匹配规则。代码如下:

    // 1. 导入 Vue 和 VueRouter 的包
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    // 导入需要使用路由切换展示的组件
    import HomePage from '@/components/tabs/HomePage.vue'
    import Product from '@/components/tabs/Product.vue'
    import About from '@/components/tabs/About.vue'
    import Contact from '@/components/tabs/Contact.vue'
    
    // 2. 调用 Vue.use() 函数,把 VueRouter 安装为 Vue 的插件
    Vue.use(VueRouter)
    
    // 3. 创建路由的实例对象
    const router = new VueRouter({
     // 在 routers 数组中,声明路由的匹配规则
     routes: [
       // path 表示要匹配的 hash 地址,也就是 App.vue 组件  中的 to 属性
       // component 表示要展示的路由组件
       { path: '/homepage', component: HomePage },
       { path: '/product', component: Product },
       { path: '/about', component: About },
       { path: '/contact', component: Contact }
     ]
    })
    
    // 4. 向外共享路由的实例对象
    export default router

到此为止,路由的基本使用就是这样,其他的一些设置以及使用方法查看vuejs官方文档

发布日期:
分类:默认

作者:BYBOY

江湖没有他的传说!

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注