vue-router路由基础

一、vue-router简介

使用vue.js开发SPA（Single Page Application，单页面应用）。根据不同url地址，显示不同的内容，但显示在同一页面中，称为单页面应用。（很多移动端产品使用SPA）

 

二、vue-router的安装

1、运行cnpm install vue-router

2、拷贝下载的vue-router.min.js，放到项目js文件夹下。

 

 3、在文档中引入vue-router.js文件

 

三、vue-router基本用法

 

1、路由的用法步骤

  1. 定义组件
  2. 配置路由
  3. 创建路由实例
  4. 将创建的路由实例挂载到Vue实例上

 

2、路由的模式mode

  • hash模式（默认模式），及时url的hash来模拟一个完整的url，于是URL改变时，页面不会重新加载。地址展示会出现#很丑。
  • history模式，这种模式充分利用history.pushState API来完成页面跳转而无需重新加载页面。

 

3、修改活动链接的样式

方式1：使用活动链接默认的类名（.router-link-active）来设置样式

 方式2：在创建路由实例时使用linkActiveClass自定义类名，然后在css中使用自定义类名写样式

 

4、路由重定向

 

 

5、实例展示

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>vue-router基本用法</title>
 6   <style>
 7       /*设置链接点击后的颜色*/
 8       .active{
 9           color: red;
10           font-size: 30px;
11           /*去除下划线*/
12           text-decoration: none;
13       }
14   </style>
15   <!--引入vue-->
16   <script src="../js/vue.js"></script>
17   <!-- 引入vue-router -->
18   <script src="../js/vue-router.min.js"></script>
19 </head>
20 <body>
21 
22     <div id="hello">
23         <div>
24             <!-- 使用router-link组件来定义导航，to属性指定链接url -->
25             <router-link to='/home'>主页</router-link>
26             <router-link to='/news'>新闻</router-link>
27         </div>
28         <div>
29             <!-- router-view用来显示路由内容 -->
30             <router-view></router-view>
31         </div>
32     </div>
33 
34     
35     <script>
36         //1.定义组件
37         var Home={
38             template:'<h3>我是主页</h3>'
39         }
40         var News={
41             template:'<h3>我是新闻</h3>'
42         }
43 
44         //2.配置路由
45         const routes=[
46             {path:'/home',component:Home},
47             {path:'/news',component:News},
48             {path:'*',redirect:'/home'}        //路由重定向，实现默认显示首页
49         ]
50 
51         //3.创建路由实例
52         const router=new VueRouter({
53             routes:routes,    //第一个routes是选项，第二个routes是配置路由时自定义的变量名。二者同名，可以直接简写为routes
54             mode:'history',    //路由的模式设置为history（默认为hash模式）
55             linkActiveClass:'active'    //更改活动链接的class类名
56         });
57 
58         //4.将创建的路由实例挂载到Vue实例上
59         let vm = new Vue({    
60             el:'#hello',
61             router:router //第一个router是选项，第二个router是创建路由实例时自定义的变量名。二者同名，可以直接简写为router
62         });
63     </script>
64 </body>
65 </html>

 

5、展示效果

 

posted @ 2021-09-10 09:57  AnnLing  阅读(222)  评论(0)    收藏  举报