Vue-router的学习

    科技2022-07-13  113

    官方文档:https://router.vuejs.org/zh/

    安装

    方法1、npm install vue-router 方法2、 在项目中的package.json文件dependencies对象中添加 eg: 然后,在cmd输入npm install 进行安装

    (最新版本可在vue-router源码‘https://github.com/vuejs/vue-router’–package.json中查看)

    引用

    1、在项目文件main.js中import vue-router(把vue-router赋值给VueRouter这个变量)

    2、通过Vue.use()方法安装vue-router插件

    (使用独立编译文件时不需要这样做,路由模块会自动安装)

    基本用法

    1、html(App.vue) 使用 router-link 组件来导航 通过传入to属性指定链接 <router-link>默认会被渲染成一个<a>标签 通过路由外链<router-view></router-view>展示链接的内容

    2、js (main.js) a).定义(路由)组件

    b).定义路由 每个路由应该映射一个组件,其中"component"可以是通过Vue.extend()创建的组件构造器,或者说是一个组件配置对象。 重定向也是通过routes配置来完成, 下面例子是从根下重定向到‘/articles’

    c).创建router实例,然后传routes配置(也可传别的配置参数,eg:mode)

    d).创建和挂载根实例 要通过router配置参数注入路由,从而让整个引用都有路由功能

    演示

    Processed: 0.012, SQL: 8