安装router路由

我用的vue3版本安装路由命令

npm install vue-router

src根目录下创建router文件夹,并且创建index.js文件

index.js文件写入下面代码

//引入vue
import Vue from 'vue'

//引入vue-router
import VueRouter from 'vue-router'

/*使用Vue*/
Vue.use(VueRouter)

//引入自定义组件
import compoent1 from "../components/compoent1.vue"
import compoent2 from "../components/compoent2.vue"

//定义路由
//const就是声明常量,类似var
const routes = [
    {
        //定义你的组件路径
        path: '/zujian1',
        //使用你的组件
        component: compoent1
    },
    {
        //定义你的组件路径
        path: '/zujian2',
        //使用你的组件
        component: compoent2
    }
]

//配置 routes
const router = new VueRouter({
    // (缩写) 相当于 routes: routes
    routes
})

//导出,不加报错
export default router

在main.js中引入router

//引入vue-router
import VueRouter from 'vue-router'

/*使用路由*/
Vue.use(VueRouter)

让整个应用都使用路由

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

App.vue中配置下面代码

<template>
  <div id="app">
    <p>
      <!--使用router-link组件做导航,通过to导入链接,<router-link>会生成一个a标签-->
      <router-link to="/zujian1">组件1</router-link>
      <router-link to="/zujian2">组件2</router-link>
    </p>

    <!-- <router-vies> 是路由出口,路由匹配到的组件都会渲染到这里,比如Vhome.vue或者Vusers.vue的内容-->
    <router-view></router-view>

  </div>
</template>

<script>

    export default {
        name: 'App',
        data(){
            return {
            }
        }
    }
</script>

<style>
</style>

配置完成

来做第一个评论吧!~

发送评论 编辑评论


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