vue-router的使用

最新推荐文章于 2025-08-19 08:41:01 发布

转载最新推荐文章于 2025-08-19 08:41:01 发布 · 53 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/timwang/p/7337643.html

文章标签：

#javascript #ViewUI

本文介绍Vue-router的基本使用方法，包括安装、基本配置及嵌套路由设置等。通过实例演示了如何在页面中设置导航链接和展示不同组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于vue-router的基本使用方法
首先，需要下载vue-router

npm install vue-router --save

vue-router在html或组件中的展现　　

```

<div id="box">
    <ul>
         <li><router-link to="/home">Home</router-link></li>
         <li><router-link to="/news">News<router-link></li>
    </ul>
    <router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
//路由配置
//组件
var Home={template: '<div><h3>我是主页</h3></div>'}
var News={template: '<div><h3>我是新闻页</h3></div>'}
var routes=[
    {path: '/home',component: Home},
    {path: '/news',component: News}
]
var router=new VueRouter({
    routes: routes
});
new Vue({
    el: '#box',
    router: router
});
</script>

```
嵌套路由
```

 1 <div id="box">
 2     <ul>
 3         <li><router-link to="/home">Home</router-link></li>
 4         <li><router-link to="/news">News<router-link></li>
 5     </ul>
 6     <router-view></router-view>
 7 </div>
 8 <script src="vue.js"></script>
 9 <script src="vue-router.js"></script>
10 <script>
11 //路由配置
12 //组件
13 var Home={
14     template: '<div><h3>我是主页</h3>'+
15     '<ul>'+
16     '<li><router-link to="/home/login">Login</router-link></li>'+
17     '<li><router-link to="/home/reg">Register<router-link></li>'+
18     '</ul>'+
19     '<router-view></router-view>'+
20     '</div>'
21 }
22 var Login={template: '<div><h3>我是登录</h3></div>'}
23 var Reg={template: '<div><h3>我是注册</h3></div>'}
24 var News={
25     template: '<div><h3>我是新闻页</h3>'+
26     '<ul>'+
27     '<li><router-link to="/home/detail/001">第一条新闻</router-link></li>'+
28     '<li><router-link to="/home/detail/002">第二条新闻<router-link></li>'+
29     '</ul>'+
30     '<router-view></router-view>'+
31     '</div>'
32 }
33 var Detail={template: '<div>{{$route.params}}</div>'}
34 /*$route.params可获取当前的{"id":"001"}
35 *$route.query可获取到url后的参数?a=22&b=kk,{"a":"22","b":"kk"}
36 */
37 var routes=[
38     {path: '/',component: Home},//默认访问主页
39     {
40         path: '/home',
41         component: Home,
42         children: [
43              {path: '/home/login',component: Login},
44              {path: '/home/reg',component: Reg}]
        },
46     {
47         path: '/news',
48         component: News,
49         children: [
50             {path: '/news/detail/:id',component:Detail}//这点要注意
51         ] 
52       }
53 ]
54 var router=new VueRouter({
55     routes: routes
56 });
57 new Vue({
58     el: '#box',
59     router: router
60 });
61 </script>