vue项目知识点——路由

1、非路由组件的使用

-- 创建或者定义

-- 引入

-- 注册

-- 使用

<template>
  <div>
    <!-- 3.使用非路由组件 -->
    <Header></Header>
    <!-- 路由组件出口的地方 -->
    <router-view></router-view>
    <Footer v-show="$route.meta.show"></Footer>
  </div>
</template>

<script>
// 1.引入非路由组件
import Header from './components/Header'
import Footer from './components/Footer'
export default {
  name: 'App',
  components: {
    // 2.注册非路由组件
    Header,
    Footer
  }
}
</script>

2、路由组件的使用

2.1 在router/index.js中配置路由

// 引入vue和vue-router
import Vue from 'vue';
import VueRouter from 'vue-router';
// 使用插件
Vue.use(VueRouter);
// 引入一级路由组件
import Home from '@/pages/Home';
import Search from '@/pages/Search';
// 配置路由
let router = new VueRouter({
    // 配置路由
    routes: [
      {
        path: "/home",
        component: Home
      },
      {
        path: "/search",
        component: Search
      },
      // 路由重定向
      {
        path: '*',
        redirect: '/home'
	  }
    ]
});
export default router;

2.2 在main.js入口文件中引入、注册路由

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
// 引入路由
import router from '@/router';
new Vue({
  render: h => h(App),
  // 注册路由：下面的写法KV一致省略V，注意router小写
  // 注册路由信息：当这里书写router的时候，组件身上都拥有$route和$router属性
  router
}).$mount('#app')

2.3 使用路由组件

<router-view></router-view>占位

3、路由跳转方式

声明式导航router-link：可以进行路由的跳转；必须要有to属性。

<router-link to='/login'>登录</router-link>

编程式导航$router.push|replace：可以进行路由的跳转。

4、路由元信息

配置路由的时候，可以给路由添加路由元信息【meta】，可以在meta配置项里自定义键值对。

例：控制Footer组件在home页面和search页面显示，在login和register页面不显示。

{
    path: "/home",
    component: Home,
    // 路由元信息
    meta: { show: true }
},
{
    path: "/search",
    component: Search,
    meta: { show: true },
},
{
    path: "/login",
    component: Login,
    meta: { show: false }
},
{
    path: "/register",
    component: Register,
    meta: { show: false }
}

<Footer v-show="$route.meta.show"></Footer>

5、路由跳转传参

方法一：字符串形式

{
    // keyword为需要传递的params参数，需要提前占位
    path: "/search/:keyword",
    component: Search,
}

// 按钮触发函数goSearch()
// this.keyword为要传递的params参数，k=this.keyword.toUpperCase()为要传递的query参数
goSearch(){
	this.$router.push('/search/'+ this.keyword + '?k=' + this.keyword.toUpperCase());
}

取参数：$route.params.keyword和$route.query.k

方法二：模板字符串 ` `

this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)

方法三：对象（常用），需要在路由配置时给对应路由配置name项。

{
    // keyword为需要传递的params参数，需要提前占位
    path: "/search/:keyword",
    component: Search,
    // 通过对象的方式传参时，要配置name属性
    name: "search"
}

this.$router.push({
  name: "search",
  params: {keyword: this.keyword},
  query: {k:this.keyword.toUpperCase()}
})

6、路由传参常见问题

6.1.路由传递参数（对象写法）path是否可以结合params参数一起使用？

答：路由跳转传参的时候，对象的写法可以是name、path形式，但是需要注意的是，path这种写法不能与params参数一起使用。

6.2.如何指定params参数可传可不传？

（比如，配置路由的时候，占位了(params参数)，但是路由跳转的时候不传递。路径会出现问题。http://localhost:8080/#/?k=ABC，正常应为 http://localhost:8080/#/serach?k=ABC）

如果路由要求传递params参数，但是你就不传递params参数，会发现URL有问题。

答：可以在配置路由的时候，在占位的后面加上一个'?'，则表示params参数可传可不传。

{
  path: "/search/:keyword?",
  component: Search,
  meta: {show: true},
  name: "search"
}

6.3.params参数可以传递也可以不传递，但是如果传递是空串，如何解决？

如果传递是空串，路径会出现问题。

答：使用undefined解决：params参数可以传递、不传递、或者传空串，路径不会出现问题。

this.$router.push({
  name: "search",
  params: {keyword: '' || undefined},
  query: {k:this.keyword.toUpperCase()}
})

6.4 路由组件还可以传递props参数，但很少用

①布尔值写法：只能传递params参数；

②对象写法：额外的给路由组件传递一些props；

③函数写法（常用）：可以把params参数、query参数，通过props传递给路由组件。

路由组件传递props数据（定义路由时，在router文件夹下）：

{
  path: "/search/:keyword?",
  component: Search,
  meta: {show: true},
  name: "search",
  // 路由组件传递props数据
  // ①布尔值写法（只能传递params参数）
  // props: true,
  // ②对象写法：额外的给路由组件传递一些props
  // props: {a:1,b:2},
  // ③函数写法：可以把params参数、query参数，通过props传递给路由组件
  // 简写形式：props: ($route)=>({keyword: $route.params.keyword, k: $route.query.k})
  props: ($route)=>{
    return {keyword: $route.params.keyword, k: $route.query.k};
  }
}

search路由组件接收props：

<script>
export default {
  name: 'Search',
  // 路由组件可以传递props
  props: ['keyword','k']
}
</script>