您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— Vue-Router安装及解析

《和小米一起学Vue.js》— Vue-Router安装及解析

[ 孤狼 | 2022-07-31 23:09:22 | Vue | 260°C | 0条评论 ]

用 Vue + Vue Router 创建单页应用非常简单:通过 Vue.js,我们已经用组件组成了我们的应用。当加入 Vue Router 时,我们需要做的就是将我们的组件映射到路由上,让 Vue Router 知道在哪里渲染它们。 


 安装vue-router

1. 可以使用以下代码在现有的项目中安装路由  

npm install vue-router@4


2. 也可以在CLI新建项目的时候,选择包含路由(推荐)  



目录解析

CLI在还有路由模块创建项目时,会默认生成一套完整的路由案例。所以创建好的目录与之前的结构不太一样。




配置路由

在使用CLI自动创建时,会自动生成一个router文件夹。里面已经替我们写好一个默认的路由,我们来分析一下一个路由文件该怎么写。

//1.导入VueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

//2.使用Vue.use(插件)来安装VueRouter插件
Vue.use(VueRouter)

//3.创建一个对象routes
const routes = [
{
path: '/', //对应的网址路径
name: 'home', //对应的路由名称
component: HomeView //对应的组件名称,在上方静态导入
},
{
path: '/about',
name: 'about',
//动态导入,当路由被访问的时候才加载对应组件,这样就会更加高效。
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
}
]

//3.组装成一个路由对象
const router = new VueRouter({
routes
})

//4.导出路由对象
export default router



调用路由

路由有了下一步就是要调用路由,路由的调用放在main.js里

import Vue from 'vue'
import App from './App.vue'
//1.导入路由, import导入路由为文件夹时,会自动寻找文件夹下的index.js文件导入,所以可以省略
import router from './router'

Vue.config.productionTip = false

new Vue({
router, //调用路由
render: h => h(App)
}).$mount('#app')



入口组件

上面的main.js内调用了路由,同时调用了一个 App.vue 入口组件,来看看入口组件里都有啥

<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>

<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}

nav {
padding: 30px;
}

nav a {
font-weight: bold;
color: #2c3e50;
}

nav a.router-link-exact-active {
color: #42b983;
}
</style>

可以看到入口组件里,放了导航条和2个超链接还有一些css,可以看成项目的入口。


router-link

请注意,我们没有使用常规的 a 标签,而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL,处理 URL 的生成以及编码。在vue解析完成之后,router-link会被解析为 a 标签。


router-view

 router-view 将显示与 url 对应的组件。你可以把它放在任何地方,以适应你的布局。



页面组件

入口组件中,并没有调用其他页面,但是由于路由的存在,所以打开入口组件的时候,路由检测到相关的路径匹配,自动加载了其他组件。默认打开一个项目对应的路径起始为 “/” 所以,这里路由调用了 HomeView 页面组件。

<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>

<script>
// @ 是 /src 的别名
//这里导入了一个组件 HelloWorld 并在template模板中调用
import HelloWorld from '@/components/HelloWorld.vue'

export default {
name: 'HomeView',
components: {
HelloWorld
}
}
</script>

可以看到,页面组件就是整个对应页面的框架,比如主页,列表页,内容页等等。而页面组件里面包含很多“模块组件”,由这些“模块组件”来拼合一整个页面。



模块组件

模块组件其实就是我们之前学习的单页面组件,这里只是为了理解项目结构才称为模块组件。模块组件放在 components 目录下。一般用于复用或拼装其他页面组件。

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>



解析过程

项目解析的大致过程可以方便的理解各个文件的定位及作用。

执行入口文件main.js => 加载index.html => 加载路由 =>加载主入口组件 => 路由适配到主入口组件需要加载页面组件 => 加载页面组件 => 页面组件要求加载模块组件 => 加载模块组件 =>拼合页面组件 => 拼合主入口组件 => main.js替换index.html内的app标签为主入口组件。


当地址变化时:  

路由适配到主入口组件需要加载页面组件 => 加载页面组件 => 页面组件要求加载模块组件 => 加载模块组件 =>拼合页面组件 => 拼合主入口组件 => main.js替换index.html内的app标签为主入口组件。



启动效果




代码下载

下载地址:  密码:r6ku


转载请注明出处:http://gl.paea.cn/n.php?n=193
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索