Vue router

html

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">

    <h1>Hello App</h1>

    <p>

        <router-link to="/foo">Go to Foo</router-link>

        <router-link to="/bar">Go to Bar</router-link>

    </p>

    <router-view></router-view>

</div>

JavaScript

1. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

2. 定义 (路由) 组件。 可以从其他文件 import 进来

constFoo={template:'foo'}

constBar={template:'bar'}

2. 定义路由

每个路由应该映射一个组件。 其中"component" 可以是通过 Vue.extend() 创建的组件构造器， 或者，只是一个组件配置对象。我们晚点再讨论嵌套路由。

constroutes=[

{path:'/foo',component:Foo},

{path:'/bar',component:Bar}

]

3. 创建 router 实例，然后传 routes 配置。 你还可以传别的配置参数, 不过先这么简单着吧。

constrouter=newVueRouter({

        routes// (缩写) 相当于 routes: routes

})

4. 创建和挂载根实例。 记得要通过 router 配置参数注入路由， 从而让整个应用都有路由功能。

constapp=newVue({

    router

}).$mount('#app')

通过注入路由器，我们可以在任何组件内通过 this.route 访问当前路由：

// Home.vue

export default{

    computed: {

        username(){

            // 我们很快就会看到 `params` 是什么

            returnthis.$route.params.username

        }

    },

    methods: {

        goBack(){

            window.history.length>1

                ? this.$router.go(-1)

                : this.$router.push('/')

        }

    }

}

该文档通篇都常使用 router 实例。留意一下 this.$router 和 router 使用起来完全一样。我们使用 this.$router 的原因是我们并不想在每个独立需要封装路由的组件中都导入路由。

引用：vue文档