Vue-router使用:

参考  https://router.vuejs.org/zh-cn/

列子

const router = new Router({

  mode: 'history',  // 使用history模式 可以去掉路径中的 #字

  routes: [

    {

      path: '/',   //路径

      name: 'First',  //自己定义的名称 ,可随意写

      component: First  // 路径对应的vue组件

    },

    {

      path: '/login',

      name: 'Login',

      component: Login

    },

    {

      path: '/index',

      name: 'Index',

      component: Index,

      redirect: {  //重定向

        name: 'NowData'

      },

      children: [ // 子路由

        {

          path: 'nowdata',

          name: 'NowData',

          component: NowData

        },

        {

          path: 'historydata',

          name: 'HistoryData',

          component: HistoryData

        },

        {

          path: 'nowposition',

          name: 'NowPosition',

          component: NowPosition

        }

      ]

    }

  ]

})

export default router

使用router

<keep-alive>  // 保留当前路由生命, 切换当前路由不会重新加载,当前路由里面组件也不会触发destroyed()方法

    <router-view/>

<keep-alive>

使用标签跳转 基本用法  更多参考官方文档

<router-link to="/login"></router-link>

使用js跳转 基本用法 更多参考官方文档

this.$router.push({ name:'user'})

在组件中观察路由变化 在

watch: {

    $route (newValue, oldValue) {

        console.log(newValue.name)

        console.log(oldValue.name)

    }

}