一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第17天，点击查看活动详情

安装

步骤：

1.下载vue-router模块到当前项目

npm  i  vue-router

2.在main.js中引入vue-router

import VueRouter  from  'vue-router'

3.使用Vue.sue()方法给vue安装插件

Vue.sue(VueRouter)  //内部自动帮我们注册注册全局RouterLink（链接）和RouterView（占位符）组件

4.创建路由规则数组-路径和组件名对应关系

const routes=[
  {path:'/find',component:Find},
  {path:'/my',component:My},
  {path:'/part',component:Part},
]

5.用规则生成路由对象

const router=new VueRouter({
    routes:routes  //可简写
})

6.把路由对象注入到new Vue 实例中

new Vue({
  render: h => h(App),
   router //注入到vue实例中
}).$mount('#app')

7.用router-view作为挂载点，切换不同的路由页面

<router-view></router-view>  //占位符，将来组件切换显示的地方

1、导入组件和创建路由规则都在mani.js里

2、挂在点写在要显示地方的组件里

路由链接和声明式导航

在vue中使用来声明路由链接

并使用来声明路由占位符

注意：这两个组件是下载的路由包帮我们提供的组件

<template>
    <h1> APP组件</h1>
    #声明路由链接  
    <router-link  to="/home">首页</router-link> // 用to属性替代a链接的href属性
    <router-link  to="/move">电影</router-link>
    <router-link  to="/about">关于</router-link>
    
    #声明路由占位符————匹配到什么组件，就在这个位置渲染什么组件
    <router-view></router-view>
</template>

1、声明hash地址使用to来声明，不用#开头，vue-router渲染时自动生成#（替代a标签）

2、router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)

3、router-link提供了声明式导航高亮的功能(自带激活时的类名,可以做高亮）

编程式导航

通过调用API实现导航的方式，叫做编程式导航

与之对应，通过点击链接实现导航的方式，叫做声明式导航

在普通的网页中点击a链接，vue中点击的都属于声明式导航
普通网页中调用location.href跳转到新页面的方式，属于编程式导航（调用的是JS的API）

#可用在点击按钮 事件里 实现跳转    
this.$router.push('hash地址') //跳转到指定hash地址，从而展示对应的组件
this.$router.push({
    path:'路由路径', 
    name:'路由名',//首先要在路由规则里添加name属性  
    //path和name都可以进行传参，二选一即可
    query:{
        参数名：值
    },
    params:{
        参数名：值
    }
})
#因为传参path会忽略params，所以可以规定以后使用编程式跳转时使用name跳转，以免bug 
#可用在点击按钮 事件里 实现前进后退
this.$router.go(数值 n)//实现导航历史的前进、后退

使用编程式跳转，传参不需要在规则里传参数

使用声明式跳转，传参有时需要在规则里传参数名

了解vue-router的基本使用

安装

路由链接和声明式导航

编程式导航