准备工作:安装nodejs : http://nodejs.cn/download/
npm install -g @vue/cli
vue --version
通过命令行方式创建:
vue create xxx-project
选择好项目存放的目录,打开命令创建创建,输入vue create helloworld
用键盘的方向键向下 ,选择vue3的语法即可。然后敲回车enter即可。会自动安装babel,eslint插件。
然后根据提示在命令提示符窗口依次输入cd helloworld和npm run serve (运行项目)
vue create --help
npm install vue-router@next --save
观察package.json的变化
通过图形界面方式创建:
vue ui
实现一个最最简单的SPA页面:
<template>
<div>
<header>
<router-link to="/">首页</router-link>
<router-link to="/news">新闻</router-link>
<router-link to="/book">图书</router-link>
<router-link to="/course">课程</router-link>
<router-link to="/video">视频</router-link>
</header>
<article>
<router-view></router-view>
</article>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
定义新闻,课程,视频,首页的路由页面组件
在项目的src目录下新建一个views页面,存放视图页面。如下:
Home.vue
<template>
<h1>我是首页</h1>
</template>
<script>
export default {
name: "Home.vue"
}
</script>
<style scoped>
</style>
Book.vue
<template><h1>我是课程</h1></template><script>export default {name: "Course.vue"}</script><style scoped></style>
News.vue
<template><h1>我是新闻</h1></template><script>export default { name: "News.vue"}</script><style scoped></style>
Video.vue
<template> <h1>我是视频</h1></template><script>export default { name: "Video.vue"}</script><style scoped></style>
// 1: 导入路由
//import {createRouter, createWebHashHistory} from 'vue-router'
import {createRouter, createWebHistory} from 'vue-router'
// 2: 导入页面模板
// import News from '@/views/News'
// import Book from '@/views/Book'
// import Video from '@/views/Video'
// import Course from '@/views/Course'
//3: 创建路由器对象,将模板全部进行路由匹配和注册
const router = createRouter({
// HASH访问模式, http://localhost:8080/#news
//history: createWebHashHistory(),
// URL访问模式,http://localhost:8080/news
history: createWebHistory(),
routes: [
// 设置欢迎页面,就path设置成 "/"即可
{path: '/', meta:{title:"首页"},component: () => import("@/views/Home")},
{path: '/news', meta:{title:"新闻"},component: () => import("@/views/News")},
{path: '/course', meta:{title:"课程"},component: () => import("@/views/Course")},
{path: '/video', meta:{title:"视频"},component: () => import("@/views/Video")},
{path: '/book', meta:{title:"图书"},component: () => import("@/views/Book")},
]
})
router.afterEach(to => {
document.title = to.meta.title;
})
// 4: 导出模板router模块即可
export default router
import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router";
createApp(App).use(router).mount('#app')
至此前端路由就全部配置完毕了。打开终端窗口,输入:npm run serve
命令。运行项目体验单页应用的前端路由即可
动态路由实现的两种方式:
基于query
URL中带有查询参数的形式为:/book?id=1
,这在传统的web应用程序中是非常场景的。在单页程序开发中,也支持路径中的查询参数。只不过参数放在的是:$route.query
中。
Book.vue
<template>
<h1>我是书籍</h1>
<ul>
<li v-for="(book,index) in bookList" :key="book.id+index">
<p>
{{book.id}}====={{book.title}}=====
<router-link :to="'/book/'+book.id">查看明细1</router-link>
<a :href="'/book/'+book.id">查看明细2</a>
</p>
<p>
<router-link :to="'/book2?id='+book.id">图书1</router-link>
<router-link :to="'/book2?id='+book.id">图书2</router-link>
</p>
</li>
</ul>
</template>
BookDetail.vue
<template>
<div>图书ID:{{ $route.params.id }}</div>
<div>图书ID:{{ $route.query.id }}</div>
</template>
<script>
export default {
data(){
return {
}
}
}
</script>
index.js
const router = createRouter({
// HASH访问模式, http://localhost:8080/#news
//history: createWebHashHistory(),
// URL访问模式,http://localhost:8080/news
history: createWebHistory(),
routes: [
// 设置欢迎页面,就path设置成 "/"即可
{path: '/', meta:{title:"首页"},component: () => import("@/views/Home")},
{path: '/news', meta:{title:"新闻"},component: () => import("@/views/News")},
{path: '/course', meta:{title:"课程"},component: () => import("@/views/Course")},
{path: '/video', meta:{title:"视频"},component: () => import("@/views/Video")},
{path: '/book', meta:{title:"图书"},component: () => import("@/views/Book")},
{path: '/book2', meta:{title:"书籍明细2"},component: () => import("@/views/BookDetail")},
{path: '/book/:id', meta:{title:"图书明细"},component: () => import("@/views/BookDetail")},
// eslint-disable-next-line no-undef
]
})
Book.vue
<template>
<h1>我是书籍</h1>
<ul>
<li v-for="(book,index) in bookList" :key="book.id+index">
<p>
{{book.id}}====={{book.title}}=====
<router-link :to="'/book/'+book.id">查看明细1</router-link>
<a :href="'/book/'+book.id">查看明细2</a>
</p>
</li>
</ul>
</template>
<script>
//实际开发中Books数组很有可能通过axios从后台获取!
import Books from '@/service/Books'
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "Book",
data(){
return {
bookList:Books
}
}
}
</script>
<style scoped>
</style>
Books.js
function loadBooks(){
return [
{id:1,title:"Java1",author:"taimi1"},
{id:2,title:"Java2",author:"taimi2"},
{id:3,title:"Java3",author:"taimi3"},
{id:4,title:"Java4",author:"taimi4"},
];
}
export default loadBooks();
BookDetail.vue
<template>
<div>图书ID:{{ $route.params.id }}</div>
</template>
<script>
export default {
data(){
return {
}
}
}
</script>
在router/index.js
// 1: 导入路由
//import {createRouter, createWebHashHistory} from 'vue-router'
import {createRouter, createWebHistory} from 'vue-router'
// 2: 导入页面模板
// import News from '@/views/News'
// import Book from '@/views/Book'
// import Video from '@/views/Video'
// import Course from '@/views/Course'
//3: 创建路由器对象,将模板全部进行路由匹配和注册
const router = createRouter({
// HASH访问模式, http://localhost:8080/#news
//history: createWebHashHistory(),
// URL访问模式,http://localhost:8080/news
history: createWebHistory(),
routes: [
// 设置欢迎页面,就path设置成 "/"即可
{path: '/', meta:{title:"首页"},component: () => import("@/views/Home")},
{path: '/news', meta:{title:"新闻"},component: () => import("@/views/News")},
{path: '/course', meta:{title:"课程"},component: () => import("@/views/Course")},
{path: '/video', meta:{title:"视频"},component: () => import("@/views/Video")},
{path: '/book', meta:{title:"图书"},component: () => import("@/views/Book")},
{path: '/book/:id', meta:{title:"图书明细"},component: () => import("@/views/BookDetail")},
]
})
router.afterEach(to => {
document.title = to.meta.title;
})
// 4: 导出模板router模块即可
export default router
this.$route.params
中,this.route
代表当前那个路由对象中,可以在组件内使用。<template>
<div>图书ID:{{ $route.params.id }}</div>
<div>图书ID:{{ $route.query.id }}</div>
<div>图书ID:{{ valueId}}</div>
</template>
<script>
export default {
data(){
return {
valueId:""
}
},
created() {
this.returnId()
},
methods:{
returnId(){
if(this.$route.params.id){
this.valueId = this.$route.params.id
}else if(this.$route.query.id ){
this.valueId = this.$route.query.id
}
}
}
}
</script>
老师的代码
<template>
<h1>你查看的书籍ID---params是:{{$route.params.id}}</h1>
<h1>你查看的书籍ID---query是:{{$route.query.id}}</h1>
<h1>你查看的书籍ID---封装的是:{{getParameter("id")}}</h1>
</template>
<script>
export default {
name: "BooksDetail",
created() {
this.getParameter("id")
},
methods:{
getParameter(field){
return this.$route.query[field] || this.$route.params[field];
}
}
}
</script>
<style scoped>
</style>
node_modules 项目依赖模块 ,开发的时候使用,打包的时候会自动的过滤一些。
public ---该目录下的文件不会被webpack编译压缩处理,引用的第三方库的js文件可以放这里
favicon.ico 图标文件
index.html 项目的主页面
src 项目代码的主目录
assets 存放项目中的静态资源,如css,图片等。
logo.png logo图片
components 组件存放目录
HelloWorld.vue vuecli默认创建的Helloworld组件
App.vue 项目根组件
main.js 程序入口js文件,加载各种公共组件和所需用到的插件。
.gitignore 如果配置了git提交项目代码时忽略那些文件和文件夹进行提交
babel.config.js babel使用的配置文件
package.json npm的配置文件,其中设定了脚本和项目依赖的各种库。
package-lock.json 用于锁定项目实际安装的各个npm包的具体来源和版本号
README.md 项目说明文件