VUE-路由vue-router

官方用来实现SPA的vue插件
VueRouter()：用于创建路由器的构建函数

一、注册路由器（在main.js）

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({//配置对象的属性都是一些确定的名称，不能修改
    el:'#app',
    components:{
       App
    },
   
    template:'<App/>',
//注册路由器
    router
});

二、路由器配置：（在router目录下的index.js）

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

声明使用vue-router插件

内部定义并注册了2个组件标签(router-link/router-view)
给组件对象添加了2个属性:

1. $router: 路由器
2. $route: 当前路由

//向外暴露路由器对象
export default new VueRouter({
  //配置n个路由
  routes:[
    {
      path:'/about',
      component:About//对应的About路由组件
    },
    {
      path:'/home',
      component:Home//对应的Home路由组件
    },
    {
      // 自动跳转路由,重定向一开始就默认about
      path: '/',
      redirect: '/about'
    }
  ]
})

三、使用路由组件标签

<router-link>：用来生成路由链接

<router-link to="/home/news">News</router-link>

<router-view>：用来显示当前路由组件界面

<router-view></router-view>

四、总结：编写使用路由的步骤

1. 定义路由组件
2. 注册路由
3. 使用路由<router-link> <router-view>

五、嵌套路由

 {
      path:'/home',
      component:Home,//对应的Home路由组件
      //嵌套路由
      children:[
        {
          path:'news',//path写路径时最左侧的斜杠/永远代表根路径
          component:News
        },
        {
          path:'/home/messages',//另一种写法
          component:Messages
        }
      ]
    },

path写路径时最左侧的斜杠/永远代表根路径