vue-router路由的使用

Z时代
2024-01-10
分类：综合

vue

1、路由作用

用vue.js + router" title="vue-router">vue-router创建单页面应用。页面不需要刷新就可以页面跳转，提供用户更好体验。

2、路由配置

new Router({
    routes: [{
            path: '/', //匹配路径
            name: 'Hello', //路由的别名
            component: Hello //需要加载的组件名
        }, {
            //使用变量名的形式传递参数。例如：/detail/10086
            //在Detail组件中使用{{$router.params.id}}来接收
            path: '/detail/:id',
            name: 'Detail',
            component: Detail
        }
    ]
})

3、路由跳转

<router-link :to="{name:'Detail',params:{id:10086}}">详情</router-link>

4、实践：两组件之间跳转

代码实例
4.1、index.js
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/component/Hello'
import Detail from '@/component/Detail'
Vue.use(Router)
export defaultnew Router({
    router: [{
            path: '/',
            name: 'Hello',
            component: Hello
        }, {
            path: '/detail/:id',
            name: 'Detail',
            component: Detail
        }]
})
4.2、Hello.vue：src->component->Hello.vue
 <template>
 <div class = "hello" >
     <h1>这是hello页面 </h1>
     < router - link: to = {name: 'Detail',params: {id: 10086}}>详情</router-link>
 </div>
 </template>
 <script>
export default{
    name: 'hello',
    data() {
        return {
            msg: 'hello vue'
        }
    }
}
 </script>
 < !--add "scoped" attribute limit css to this compent only-- >
 <style scoped>
    h1, h2 {
        font - weight: normal;
    }
    ul {
        list - style - type: none;
        padding: 0;
    }
    li {
        display: inline - block;
        margin: 0 10px;
    }
    a {
        color:  # 42b983
    }
    </style>
4.3、Detail.vue：src->component->Detail.vue
 < template >
 < div >
 < h1 > 这是detail页面 </h1> 
 {{$route.params.id}}
 </div>
 </template>
 <script>
export default{
    name: 'hello',
    data() {
        return {}
    }
}
 </script>
 < !--add "scoped" attribute limit css to this compent only-- >
 < style scoped >
 </style>
4.4、启动项目
my_vue_app > npm run dev