使用vue-cli 创建vue2.x项目中使用vue-router 与之前的区别

时间:2021-06-02 23:25:24

使用vue-cli 创建vue2.x项目中使用vue-router 与之前的区别

现在根据官方文档 查看开始 ,可以看到:

HTML中

使用router-link 组件来导航,通过传入’to’ 属性指定链接,而<router-link> 默认会被渲染成一个<a> 标签.

使用的链接样式为:

<router-link to='/foo'>foo page</router-link> ,

而在之前使用的是:

<a v-link="{path:'/foo'}">foo page</a>

可以看到差别还是很大的.

在看路由出口,路由匹配到的组件将渲染在这里:

<router-view></router-view>

在本例中则是:

使用vue-cli 创建vue2.x项目中使用vue-router 与之前的区别

JavaScript 中

router 文件夹中,修改index.js 文件,定义路由内容.

  1. 定义(路由组件)-从其他文件 import 进来:

    import Goods from '@/components/goods/goods'

  2. 定义路由,每个路由应该映射一个组件,其中’component’可以是通过Vue.extend() 创建的组件构造器,或者只是一个组件配置对象:

    const routes = [{ path: '/foo',component: Foo},{...}]

  3. 创建 router 实例,然后传 routes 配置:

    const router = new VueRouter({
    routes // (缩写)相当于 routes: routes
    })
  4. 创建和挂载根实例.记得要通过 router 配置参数注入路由,从而让整个应用都有路由功能:

    const app = new Vue({
    router
    }).$mount('#app')

    现在可以启动应用啦.

    在本例中和上文的有些许不同 :

    router 文件夹下的index.js :

使用vue-cli 创建vue2.x项目中使用vue-router 与之前的区别

main.js 文件则是:

使用vue-cli 创建vue2.x项目中使用vue-router 与之前的区别

(两种书写形式都可以运行).