vue 路由 vue-router

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013022210/article/details/88638631

地址：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>