1、Vue項目新建成功之後,打開src的目錄。
src目錄是我們要寫代碼的目錄
- assets 目錄 用來存放一些靜態資源
- components 目錄 用來存放我們的組件,我們要寫的代碼基本都在這個目錄下,新建的vue頁面都放在這個目錄下
- router 目錄 目錄下index.js 是我們的路由文件,規定了項目中可以訪問的路由
- App.vue 是我們的核心文件,可以理解爲入口文件
- main.js 核心js文件,在這個文件初始化了Vue
2、新建成功之後,默認會產生一個 HelloWorld.vue,而且在我們的路由文件中可以看到
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
在路由文件中定義了 ‘/’ 路由,訪問的路徑是 /,在項目中使用的時候名字定義爲 HelloWorld,對應的組件是 HelloWorld.vue
3、打開HelloWorld.vue修改html頁面中的內容
<template>
<div class="hello">
<router-link :to="list">跳轉列表頁</router-link>
<router-link :to="{name:'detail',query::{id:1}}">跳轉詳情頁</router-link>
</div>
</template>
要接受對應參數可以使用
console.log( this.$route.query.id );
4、在components 新建一個BlogList.vue的文件
添加一下內容
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a href="https://vuejs.org" target="_blank" >
百度一下,你就知道
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'BlogList',
data () {
return {
msg: 'BlogList.vue'
}
}
}
</script>
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
5、找到路由文件index.js ,添加路由
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}, {
path: '/list',
name: 'list',
component: BlogList
}
]
})