路由的基本使用方法

vue-router的使用分为三步

  1. 引入vue-router，并使用Vue.use(VueRouter)

  2. 定义路由数组const routes = {}，并将数组routes传入VueRouter实例，并将实例暴露出去export default new VueRouter({ routes})

  3. 将VueRouter实例引入到main.js，并注册到根Vue实例

注意：this.$route、this.$router

  • this.$route：表示的是当前的路由信息。this.$route.matched是一个数组，包含了当前路由的所有的嵌套记录，即是routes配置中的对象数组，包括自己的信息和children数据。

  • this.$router：表示的是全局的路由信息。通过vue根实例中注入router实例，然后再注入到每个子组件，从而让整个应用都有路由功能。所有的页面都可以访问。比如常用的是this.$router.push()。如果提供了path，params会被忽略，例如：

    this.$router.push({path: 'home', params: { page: 2}}) 这里的params会被忽略。同样的规则也适用于router-link的to属性

使用route-link组件进行路径跳转

使用router-view组件进行路由对应内容展示

0