vue-router的使用方式

vue-router的使用过程:

​ 一.创建vue-router组件

    一般使用vue-router的组件都是视图级别的,也就是由多个组件组成,为了区分router组件与常规的小组件components,我们创建与components同等级的新文件夹:views,用于存放相关的router组件。

​ 二.配置vue-router相关路由信息

    1.创建与views,main.js同级别的router文件夹,用于存放router的配置信息index.js。

​ 2.在index.js中,我们首先需要引入通过安装好的vue-router插件,由于我们需要使用到全局的Vue框架,通过Vue.use(VueRouter)来完成对vue-router的应用,所以我们还需要引入vue,由于我们在路由中需要对views中的组件进行注册,所以我们仍然需要将所有的views组件进行引入

​ 也就是说,在逻辑层面我们需要引入(import):

​ a.vue

​ b.vue-router

 c.所有使用到的组件
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../components/Home.vue";
import About from "../components/About.vue";

​ 3.通过Vue.use(VueRouter)整合Vue与插件vue-router

//1.通过Vue.use(插件),安装插件
Vue.use(VueRouter);

​ 4.书写配置数组routers的配置,数组中每个元素均为json对象,基本用法为:

const routers=[{
name:'name'

path:'···'

component:componentName

}]

​ 5.通过调用VueRouter的构造函数,将routers数组作为参数{}创建vue-router对象,实现vue-router的实例化。

//2.创建vue-router对象
const router = new VueRouter({
  //配置路由和组件之间的映射关系
  routes
});

​ 6.将定义好的router对象导出。

//4.将定义好的vue-router对象导出
export default router;

​ 7.在main.js中,导入定义好的router对象。

//5.引入router对象
import router from './router'

​ 8.在main.js中,在app的vue实例中,挂载router:router属性,实现vue-router的使用。

完整代码:

new Vue({
  //6.挂载router对象
  router,
  render: h => h(App)
}).$mount('#app')

​ 三.使用vue-router,应用路由

​ 在App.vue中,在合适的需要使用到路由的位置添加内置的<router-link>`组件,并且指定组件的to属性(后接path路由路径)。然后在需要展示路由view组件的位置,使用`<router-view>组件,完成对router的应用。

注意:<router-link>`组件会被编译为a标签,而`<router-view>会被定义的组件完全代替(起到占位的作用,类似slot)

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇