欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue 路由配置及安装

程序员文章站 2024-02-12 12:36:16
...

安装路由:

1.在cmd中 cd 到对应的vue项目,输入"npm install vue-router --save-dev"

2.安装完成以后,输入“npm 重启项目”

引入路由:

1.在main.js文件中引入路由  import VueRouter form 'vue-router'

2.使用路由:Vue.use(VueRouter)

路由配置:

var router = new VueRouter({
    routes:[
            {path:"/" ,component:Home} ,
            {path:"/hello" ,component:helloworld} ,//引入相应的组件
    ],
    mode:"history"
}) 

引用路由 :

new Vue({
    router,
    el: '#app',
    components: { App },
    template: '<App/>'
})

组件展示:<router-link to=""></router-link>,<router-view></router-view>

<div id="app">
    <li><router-link to = "/">home</router-link></li> 
    <li><router-link to = "/helloworld">helloworld</router-link></li>
    <router-view></router-view>
</div>

 

相关标签: vue路由