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
}
]
})