前端路由

vue路由基本使用

1.安装 npm i vue-router@版本号

2.创建路由文件 router/index.js

在这个文件里配置路由

//配置路由,一段固定的代码
// 导入路由插件
import VueRouter from 'vue-router'
import Vue from 'vue'
// 使用插件 - 重要
Vue.use(VueRouter)
// 导入组件
import MyMovie from './MyMovie.vue'
// 创建路由规则
const router = new VueRouter({
  routes: [
    {
      path: "/",  //进行 /路径时自动跳转到home地址
      redirect: "/home" // 重定向
    },
    
    {
      path: "/page1", // 当浏览器访问 http://localhost:8080/#/page1时，
      component: MyMovie  // 装入组件MyMovie
      
          //配置二级路由
           children: [ //路由嵌套
          {
           path: "",   //path为空,展示/page时,展示这个组件page组件+SportIndex组件
           component: SportIndex
         },
          {
           path: '/china',    //path以/开头,表示/china时,展示这个组件
           component: China
         },
          {
           path: 'use',  //path不以/开头,表示访问地址要加上,上级路由的地址 // localhost:3000/#/sport/usa
           component: use
         }
       ]
    },
    
    { // 放在最下面,当上面路由都不匹配时, 就会匹配这个通配符, 显示NotFound页面
    path: "*",
    component: NotFound
    }
  ]
})
//导出
export default router

3.使用路由

import router from './router/index.js' //路由文件

new Vue({
  router: router, // 使用路由
  render: h => h(App),
}).$mount('#app'

使用路由

//根据地址不同,自动装入在router/index.js中配置的文件 
<router-view/> //要在使用的页面写上这个标签

链接导航-router-link

作用： 用于提供路由链接，实现页面跳转

格式: <router-link to="/home">首页</router-link>

是vue提供的组件,带有高亮功能,相当于是<a>链接,最终也会渲染成a链接。

<router-link to="xxx">首页</router-link> 
//一定要配合to实现切换路由,to的路径名要写的和路由文件中的path属性中的路径名一样

如果当前路由被激活会在渲染出的a标签里添加特殊的类名:router-link-exact-active router-link-active

页面跳转传参

1.query传参。 适用场景：页面搜索

//传
<router-link to="/goods?name=外套&price=168">外套</router-link> 
// 接收:
{{$route.query}}

2.params传参。 适用场景：详情页

<router-link to="/goods/123">详情</router-link>  
//接收:
{{$route.params}}

编程式导航

写代码的方式,来让页面跳转

// 跳转页面不传参
this.$router.push('/路由路径')
this.$router.push({path: '路由路径'})
this.$router.push({name: '路由名称'})

// 跳转并query传参-方式1
this.$router.push("/路由路径?参数1=值1&参数2=值2")
// 跳转并query传参-方式2
this.$router.push({
    path: "路由路径",
    query: {
        "参数1":值1,
        "参数2":值2
    }
})

// 跳转并params传参-方式1
this.$router.push("/路由路径/值1/值2")
// 跳转并params传参-方式2
this.$router.push({
    name: "路由名称",
    params: {
        "参数1":值1,
        "参数2":值2
    }
})

// 后退
$router.back()

// this.$route： 保存当前的路由信息。用做获取传递的参数
// this.$router: 路由对象。router/index.js 中导出的对象,提供各种路由相关的API,例如页面跳转