vue 路由 vue-router

本文主要是介绍vue 路由 vue-router，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

地址：https://router.vuejs.org/zh/installation.html

1.安装

npm install vue-router --save // cnpm install vue-router --save

 2.引入并且使用 vue.use(VueRouter) （main.js）

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)

3. 配置路由

A、创建组件 引入组件

B、定义路由

const routes = [{ path: '/foo', component: Foo },{ path: '/bar', component: Bar },{ path: '*', component: Home } //重定向路由
]

C、实例化VueRouter

const router = new VueRouter({routes // (缩写) 相当于 routes: routes
})

D、创建和挂载根实例

const app = new Vue({router
}).$mount('#app')

 E、根组件的模板里面放上  <router-view></router-view>放在App.vue 中

 F、

4.跳转页面

    <!-- 使用 router-link 组件来导航. --><!-- 通过传入 `to` 属性指定链接. --><!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --><router-link to="/foo">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-link>

 

这篇关于vue 路由 vue-router的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---