新建vue项目
main.js
import Vue from 'vue'
import App from './App.vue'
import router from "@/router";
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
router
}).$mount('#app');
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 {
name: 'App',
}
</script>
<style>
.link{
height: 50px;
line-height: 50px;
background-color: #495150;
display: flex;
margin: -3px -3px 50px -3px;
}
.link a {
width: 110px;
height: 50px;
line-height: 50px;
background-color: red;
display: inline-block;
border-radius: 10px;
margin-right: 5px;
color: white;
text-align: center;
text-decoration: none;
}
*{
margin: 0;
padding: 0;
}
</style>
MyHome.vue
<template>
<div class="my-home">
<div class="logo-box"><h1>黑马程序员</h1></div>
<div class="search-box">
<input type="text">
<button>搜索一下</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>
</div>
</div>
</template>
<script>
export default {
name: "MyHome"
}
</script>
<style scoped>
.my-home{
width: 50%;
height: 500px;
text-align: center;
}
.logo-box{
margin-bottom: 40px;
}
.search-box input{
width: 500px;
height: 30px;
line-height: 30px;
}
.search-box button{
width: 170px;
height: 35px;
line-height: 35px;
background-color: red;
color:white;
}
.hot-link{
margin-top: 18px;
}
.hot-link a{
margin-right: 20px;
}
</style>
MySearch.vue
<template>
<div class="my-search">
<p>搜索关键字:{{ $route.query.key }}</p>
<p>搜索结果:</p>
<ul>
<li>..............</li>
<li>..............</li>
<li>..............</li>
<li>..............</li>
</ul>
</div>
</template>
<script>
export default {
name: "MySearch",
created() {
//在created中,获取路由参数,需要加this
console.log(this.$route.query.key);
}
}
</script>
<style scoped>
.my-search{
width: 400px;
height: 240px;
padding: 0 20px;
border: 2px solid lightsalmon;
margin-left: 100px;
border-radius: 10px;
}
</style>
index.js
import Vue from 'vue'
import VueRouter from "vue-router";
import MyHome from "@/views/MyHome";
import MySearch from "@/views/MySearch";
Vue.use(VueRouter);
const router = new VueRouter({
routes:[
{ path:'/home',component:MyHome},
{ path:'/search',component: MySearch}
]
});
export default router