vue-router核心概念

vue用来实现SPA的插件

    使用vue-router

        1. 创建路由器: router/index.js

          new VueRouter({

            routes: [

              { // 一般路由

                path: '/about',

                component: about

              },

              { // 自动跳转路由

                path: '/', 

                redirect: '/about'

              }

            ]

          })

        2. 注册路由器: main.js

           import router from './router'

           new Vue({

           router

           })

        3. 使用路由组件标签:

           <router-link to="/xxx">Go to XXX</router-link>

           <router-view></router-view>

    编写路由的3步

        1. 定义路由组件    

        2. 映射路由

        3. 编写路由2个标签

    嵌套路由

        children: [

            {

              path: '/home/news',

              component: news

            },

            {

              path: 'message',

              component: message

            }

         ]

    向路由组件传递数据

        params: <router-link to="/home/news/abc/123">

        props: <router-view msg='abc'>

    缓存路由组件

        <keep-alive>

          <router-view></router-view>

        </keep-alive>

    路由的编程式导航

    this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)

    this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)

    this.$router.back(): 请求(返回)上一个记录路由

转载于:https://www.cnblogs.com/songhongye/p/10375545.html