vue笔记-router(1)

vue笔记-router

将访问的url(path)转换成组件并显示的一个功能组件

安装路由组件

不推荐 cnpm install router

推荐： vue add router

编写顺序

• 创建路由需要的组件
• 通过createRouter创建路由对象并传入hash和history
• 使用app 注册路由对象（use方法）
• router-link和router-view

详情

1

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  }
}
</script>

2

import { createRouter, createWebHashHistory,createWebHistory } from 'vue-router'
// createWebHashHistory  指定模式  hash  显示#
// createWebHistory   指定模式  History   不显示#
import HomeView from '../views/HomeView.vue'

// 映射关系
const routes = [
  {
    path: '/',
    name: 'aaa',
    // 重定向   ：简单是 刚开始的根路径是/ 下· 默认显示到首页去  可使用重定向
    //  name 属性  不可重复 
    redirect:"/home"
  },
  {
    path: '/home',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about/:id',
    name: 'about',
    //用户路径不是写死的 后有id id不同  路径后使用一个动态字段称为路径字段
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    
    // 路由懒加载
    // 原因：打包构建时候 js包会变得很大，影响页面加载  ，分包提高首页的渲染效率
    component: () => import(/* webpack:"aboutView"*/"../views/AboutView.vue")
    // /* webpack:"aboutView"*/打包命名
  },
  {
    path: "/:pathMatch(.*)",
    // 页面url不正确的时候显示的文本   
    component:()=>import("../views/NotFound.vue")
  }
]

const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes
})

export default router

3 App.vue

<template>
  <router-view/>
  <nav>
    <!-- /* .router-link-active  点击切换后有默认属性  默认添加一个属性  -->
    <!-- active-class="active"  进更改class -->
    <router-link to="/home" >Home</router-link> |
    <router-link to="/about/112">用户112</router-link>
    <router-link to="/about/321">用户321</router-link>
  </nav>
  
</template>

<style>

.router-link-active{ 
  color: red;
  font-size: 20px;
}
</style>

4 main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

router-link 默认样式 .router-link-active

router-link 默认添加一个class样式，可以实现样式变色

.router-link-active{ 
  color: red;
  font-size: 20px;
}

NotFound

如果用户通过url 访问其他链接 找不到可以显示NotFound

1. 创建NotFound.vue 组件

<template>
  <div>
    你当前的路径{{$route.params.pathMatch}}不正确
    //route.params.pathMatch  可以拿到对应的路径
  </div>
</template>
<script>
export default {  
}
</script>

<style scoped>
div{
    color: red;
    font-size: 50px;
}
</style>

2.在路由中添加

 {
    path: "/:pathMatch(.*)",
    // 页面url不正确的时候显示的文本   
    component:()=>import("../views/NotFound.vue")
  }

编程式路由

fn1() {
      console.log(this.$router);
      // 完成路由的跳转
      //this.$router.push("/")
      // 完成路由的替换
      // this.$router.replace("/")
      // 完成任意历史的切换  0代表刷新
      this.$router.go(0)
    },

路由值的传递

qurey 会在url出现参数

 fn2() {
      // 通过query 完成值的传递
      this.$router.push({path:"/order",query:{name:"商品列表",type:"水果类"}})
    }
``
接收

```javascript
<template>
  <div>
    {{ name }}--{{ type }}
  </div>
</template>

<script>


export default {
  data() {
    return {
        name: "我是默认的",
        type:"默认的"
    }
  },
  mounted() {
    // 通过qurey 完成值的接收
  console.log(this.$route);
    this.name = this.$route.query.name
    this.type = this.$route.query.type
  
 }
}
</script>

<style scoped>

</style>

params

隐式传递

 fn3() {
 	 //在路由4.1.4(2022 8.22)之后 params必须将参数带到url上  如果希望隐藏可以使用state传递
      this.$router.replace({name:"order2",params:{name:"黄瓜",type:"蔬菜"}})
    }

fn3() {
 	 //在路由4.1.4(2022 8.22)之后 params必须将参数带到url上  如果希望隐藏可以使用state传递
      this.$router.replace({name:"order2",state:{name:"黄瓜",type:"蔬菜"}})
    }

mounted() {
        console.log(history);
        this.name = history.state.name
        this.type=history.state.type
        
    }