2.16

今天学习router的声明式导航与编程式导航

笔记和代码写一块了,具体看代码

 index.js

import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
import NotFind from '@/views/NotFind'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  mode:'history',//地址不会带#号,以后上线需要后台配置访问规则(nginx配置规则和跨域调用),不然会出现空白页
  routes: [
    {path:'/', redirect:'/home'},//路由重定向,匹配到path后,强制跳转path路径
    { path: '/home', component: Home },
    { path: '/search', component: Search },
    // { name:'search',path: '/search/:words?', component: Search },//加问号表示可以不传参数也可以匹配
    {path:'*', component: NotFind},//*任意路径,放在最后,前面不匹配就命中这个

  ]
})

export default router

Home.vue

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text" v-model="inputValue">
      <button @click="goSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search?key=黑马程序员">黑马程序员</router-link>
      <router-link to="/search?key=前端培训">前端培训</router-link>
      <router-link to="/search?key=如何成为前端大牛">如何成为前端大牛</router-link>
      <!-- 声明式导航,跳转传参 -->
      <!-- <router-link to="/search/黑马程序员">黑马程序员</router-link>
      <router-link to="/search/前端培训">前端培训</router-link>
      <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'FindMusic',
  data() {
    return {
      inputValue:'',
    }
  },
  methods:{
    
    goSearch(){
      //编程式导航
      //通过路径的方式跳转
      //this.$router.push('/search'),
      //完整写法--可传参
      // this.$router.push({
      //   path:'/search',
      // })

      //通过命名路由的方式跳转-----适用于path较长的时候,通过  起名  就可以不用写长的路径了
      // this.$router.push({
      //   name:'路由名'
      // })



      //路由传参
      //path路径跳转传参(query传参)
      // this.$router.push('/路径?参数名1=参数值1&参数名2=参数值2')
      this.$router.push(`/search?key=${this.inputValue}`)
      //或者写为
      // this.$router.push({
      //   path:'/路径',
      //   query:{
      //     参数名1:参数值1,
      //     参数名2:参数值2,
      //   }
      // })
      //动态路由传参
      // this.$router.push('/路径/参数值')
      // this.$router.push({
      //   path: '/路径/参数值'
      // })
    }
  }
}
</script>

<style>
.logo-box {
  height: 150px;
  background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>

NotFind.vue

<template>
  <div class="NotFind">404</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

Search.vue

<template>
  <div class="search">
    <p>搜索关键字: {{ $route.query.key }}</p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MyFriend',
  created(){
    //在js中,获取路由参数this.$route.query
    //console.log(this.$route.params.words);
    console.log(this.$route.query.key);
  }
}
</script>
<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>

App.vue

<template>
  <div id="app">
    <div class="link">
      <router-link to="/home">首页</router-link>
      <router-link to="/search">搜索页</router-link>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.link {
  height: 50px;
  line-height: 50px;
  background-color: #495150;
  display: flex;
  margin: -8px -8px 0 -8px;
  margin-bottom: 50px;
}
.link a {
  display: block;
  text-decoration: none;
  background-color: #ad2a26;
  width: 100px;
  text-align: center;
  margin-right: 5px;
  color: #fff;
  border-radius: 5px;
}
</style>

main.js

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

Vue.config.productionTip = false

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