vueRouter 重定向 高亮 传参 嵌套 简单示例

目录

概念

安装： 

npm

yarn

重定向

路由高亮

跳转 和 参数

路由嵌套

概念

前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；

后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源

在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）

基本使用

1. 引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）
2. 创建路由new VueRouter(),接受的参数是一个对象
3. 在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
4. path属性是url的地址,component属性就是显示的组件（传组件的对象）
5. 创建的路由需要和vue实例关联一下
6. 路由到的组件显示在哪个位置

安装： 

npm

npm install vue-router@4

yarn

yarn add vue-router@4

在router文件中

// 引入
import Vue from 'vue'
import Router from 'vue-router'
import home from '../views/home/index' // 组件
 
 
// 挂载
Vue.use(Router)
export default new Router({
    routes: [
    {
      path: '/index', // 路径
      name: 'index', // name属性
      component: home // 组件
    },
    {},{} // 路由
]
})

 通过调用 app.use(router)，我们可以在任意组件中以 this.$router 的形式访问它，并且以 this.$route 的形式访问当前路由：

在main文件中 （只展示核心代码）

// 引入router
import router from './router'
 
new Vue({
  router, 
  render: h => h(App)
}).$mount('#app')

主页面