Vue項目初始化：
Vue項目請求生命周期和文件組件
創建vue文件：user
<!--
.vue文件就是一個組件：html、css、js
html由template標簽提供：有且只有一個根標簽
css由style標簽管理：style標簽添加scope屬性，保證樣式只在該組件內部起作用(樣式組件化)
js由script標簽管理：內部書寫的就是組件{}語法，但是一定要導出 export default
-->
<template>
<div class="user">
<Nav />
<h1>用戶頁面</h1>
<Footer />
</div>
</template>
<script>
export default {
name: "User",
components: {
Nav,
Footer,
},
data(){
return {
}
},
methods: {
}
}
</script>
<style scoped>
</style>
1.入口文件：加載vue、router、store等配置 以及 加載自定義配置(自己的js、css，第三方的js、css)
2.創建項目唯一根組件，渲染App.vue，掛載到index.html中的掛載點 => 項目頁面顯示的就是 App.vue 組件
3.在App.vue中設置頁面組件占位符
4.瀏覽器帶着指定 url鏈接 訪問vue項目服務器，router組件就會根據 請求路徑 匹配 映射組件，去替換App.vue中設置頁面組件占位符
* eg: 請求路徑 /user => 要渲染的組件 User.vue => 替換App.vue中的 <router-view/> */
路由
小組件與路由跳轉
寫兩個組件
Footer
<template>
<div class="footer">
<p>這是頁腳</p>
</div>
</template>
<script>
export default {
name: "Footer"
}
</script>
<style scoped>
.footer {
width: 100%;
height: 120px;
background-color: lightslategrey;
}
.footer p {
line-height: 120px;
text-align: center;
}
</style>
Nav
<template>
<ul class="nav">
<li>
<!--router-link會別解析為a標簽，但是不能直接寫a，因為a跳轉回刷新頁面-->
<!--<a href="/">主頁</a>-->
<router-link to="/">主頁</router-link>
</li>
<li>
<!--<a href="/user">用戶</a>-->
<router-link to="/user">用戶</router-link>
</li>
</ul>
</template>
<script>
export default {
name: "Nav"
}
</script>
<style scoped>
.nav {
width: 100%;
height: 60px;
background-color: aquamarine;
list-style: none;
margin: 0;
padding: 0;
}
.nav li {
width: 80px;
text-align: center;
float: left;
}
.nav li:hover {
background-color: antiquewhite;
cursor: pointer;
}
a {
color: black;
text-decoration: none;
display: block;
width: 80px;
line-height: 60px;
}
/*router-link渲染的a激活時的狀態*/
a.router-link-exact-active {
color: pink;
}
</style>
Home.vue導入這兩個組件
<template>
<div class="home">
<!--vue項目環境下，模板也受vue環境控制，使用標簽支持大小寫-->
<!--3、使用導入的小組件-->
<Nav></Nav>
<div class="main">
<!-- key屬性是為標簽建立緩存的標識，不能重復，且在循環組件下，必須設置 -->
<Book v-for="book in books" :book="book" :key="book.title" />
</div>
<Footer></Footer>
</div>
</template>
<script>
// 1、導入要使用的小組件
import Nav from '@/components/Nav.vue'
import Footer from '../components/Footer.vue'
import Book from '../components/Book.vue'
// 前台自己提供的靜態資源，在傳輸后再使用(組件間交互)，要才有require函數來加載資源
// let img1 = require('../assets/img/西游記.jpg');
let books = [
{id:1, img:require('../assets/img/西游記.jpg'), color:'red', title: '西游記', info: '西游記這本書寫的好啊！里面有妖怪啊，主人公猴子死了啊！！！'},
{id:3, img:require('../assets/img/東游記.jpg'), color:'orange', title: '東游記', info: '東游記這本書寫的好啊！里面都沒有妖怪啊，有個球啊！！！'},
{id:4, img:require('../assets/img/西廂記.jpg'), color:'cyan', title: '西廂記', info: '西廂記不看過，內容也就那樣吧！！！'},
{id:7, img:require('../assets/img/三國.jpg'), color:'yellow', title: '三國', info: '你看不懂，別看了，我也不講了！！！'},
];
export default {
name: 'home',
// 2、注冊要使用的小組件
components: {
Nav,
Footer,
Book,
},
data() {
return {
books
}
}
}
</script>
路由重定向
添加Book文件：
<template>
<div class="book">
<div class="left">
<!--<div class="img" :style="{backgroundColor: book.color}"></div>-->
<!-- 資源的加載才有相對路徑 -->
<img class="img" :src="book.img" alt="">
</div>
<div class="right">
<!--<h2 @click="goDetail(book.id)">{{ book.title }}</h2>-->
<h2>
<!--<router-link :to="'/book/detail/' + book.id">{{ book.title }}</router-link>-->
<router-link :to="{name: 'book-detail', params: {pk: book.id}}">{{ book.title }}</router-link>
</h2>
<p>{{ book.info }}</p>
</div>
</div>
</template>
<script>
export default {
props: ['book'],
data() {
return {
color: 'red',
title: '西游記',
info: '西游記這本書寫的好啊！里面有妖怪啊，主人公猴子死了啊！！！'
}
},
methods: {
goDetail(id) {
window.console.log(id);
window.console.log(this.book.id);
// 路由的邏輯跳轉
// window.console.log(this.$router);
// this.$router.push(`/book/detail/${id}`);
// this.$router.push({
// name: 'book-detail',
// params: {pk: id},
// });
}
}
}
</script>
<style scoped>
.img {
width: 360px;
height: 160px;
}
.left, .right {
float: left;
}
.book:after {
display: block;
content: '';
clear: both;
}
.book {
margin: 10px 0;
border: 1px solid rgba(0,0,0,0.3);
}
.right {
margin-left: 20px;
}
h2 {
cursor: pointer;
}
</style>
路有邏輯跳轉：
<template>
<div class="book">
<div class="left">
<!--<div class="img" :style="{backgroundColor: book.color}"></div>-->
<!-- 資源的加載才有相對路徑 -->
<img class="img" :src="book.img" alt="">
</div>
<div class="right">
<!--<h2 @click="goDetail(book.id)">{{ book.title }}</h2>-->
<h2>
<!--<router-link :to="'/book/detail/' + book.id">{{ book.title }}</router-link>-->
<router-link :to="{name: 'book-detail', params: {pk: book.id}}">{{ book.title }}</router-link>
</h2>
<p>{{ book.info }}</p>
</div>
</div>
</template>
<script>
export default {
props: ['book'],
data() {
return {
color: 'red',
title: '西游記',
info: '西游記這本書寫的好啊！里面有妖怪啊，主人公猴子死了啊！！！'
}
},
methods: {
goDetail(id) {
window.console.log(id);
window.console.log(this.book.id);
// 路由的邏輯跳轉
// window.console.log(this.$router);
// this.$router.push(`/book/detail/${id}`);
// this.$router.push({
// name: 'book-detail',
// params: {pk: id},
// });
}
}
}
</script>
<style scoped>
.img {
width: 360px;
height: 160px;
}
.left, .right {
float: left;
}
.book:after {
display: block;
content: '';
clear: both;
}
.book {
margin: 10px 0;
border: 1px solid rgba(0,0,0,0.3);
}
.right {
margin-left: 20px;
}
h2 {
cursor: pointer;
}
</style>
路由傳參
<template>
<div class="book">
<div class="left">
<!--<div class="img" :style="{backgroundColor: book.color}"></div>-->
<!-- 資源的加載才有相對路徑 -->
<img class="img" :src="book.img" alt="">
</div>
<div class="right">
<!--<h2 @click="goDetail(book.id)">{{ book.title }}</h2>-->
<h2>
<!--<router-link :to="'/book/detail/' + book.id">{{ book.title }}</router-link>-->
<router-link :to="{name: 'book-detail', params: {pk: book.id}}">{{ book.title }}</router-link>
</h2>
<p>{{ book.info }}</p>
</div>
</div>
</template>
<script>
export default {
props: ['book'],
data() {
return {
color: 'red',
title: '西游記',
info: '西游記這本書寫的好啊！里面有妖怪啊，主人公猴子死了啊！！！'
}
},
methods: {
goDetail(id) {
window.console.log(id);
window.console.log(this.book.id);
// 路由的邏輯跳轉
// window.console.log(this.$router);
// this.$router.push(`/book/detail/${id}`);
// this.$router.push({
// name: 'book-detail',
// params: {pk: id},
// });
}
}
}
</script>
<style scoped>
.img {
width: 360px;
height: 160px;
}
.left, .right {
float: left;
}
.book:after {
display: block;
content: '';
clear: both;
}
.book {
margin: 10px 0;
border: 1px solid rgba(0,0,0,0.3);
}
.right {
margin-left: 20px;
}
h2 {
cursor: pointer;
}
</style>