Vue.js之路由

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

vue

Vue.js之路由

　　以前的跳转都是使用a标签，a标签里有一个属性叫href，给他一个对应的网络地址或者一个路径的话，它就会帮助跳转到对应的页面。

　　Vue.js的路由，其实跟我们的a标签实现的功能是一样的，我们也是实现一个对应的跳转，只不过路由的性能更优化，a标签不管点击多少次，都会发生对应的网络请求，页面会不停地进行页面刷新，但是路由不一样，只要使用路由机制的话，你只要点击之后，他不会出现我们的请求以及页面刷新，直接就转换到你要去的地址，这是我们使用路由的好处。

　　要使用路由，需要先安装路由模块，在IDE的Terminal中输入这句话： npm install vue-router --save-dev 来安装。
　　安装路由模块以后就可以在项目里使用路由了。

　　使用路由首先要在main.js当中进行设置，通过 import VueRouter from 'vue-router' 将我们的路由模块先引进来，然后在下面通过 Vue.use(VueRouter) 使用一下引用进来的模块。
　　使用路由以后就可以在下面进行配置路由了：

1 const router = new  VueRouter({
2   routes:[
3     {path:'/',component:Home},
4     {path:'/helloworld',component:HelloWorld}
5   ],
6   mode:"history"
7 })

　　path是要路由的地址，component是抓取到地址后要跳转到的组件。这里要跳转到的组件也要在main.js中引入.　

　例如: import HelloWorld from './components/HelloWorld' 和 import Home from './components/Home'

一个小demo

　　main.js文件：

 1 import Vue from 'vue'
 2 import VueRouter from 'vue-router'
 3 import App from './App'
 4 import HelloWorld from './components/HelloWorld'
 5 import Home from './components/Home'
 6 
 7 Vue.config.productionTip = false
 8 Vue.use(VueRouter)
 9 
10 //配置路由
11 const router = new  VueRouter({
12   routes:[
13     {path:'/',component:Home},
14     {path:'/helloworld',component:HelloWorld},
15   ],
16   mode:"history"
17 })
18 
19 new Vue({
20   router,
21   el: '#app',
22   components: { App },
23   template: '<App/>'
24 })

　　要在路由中加 mode：”history“ ，否则项目地址会多出 localhost:8080/#/ ，会影响我们项目的功能。

　　Home.vue文件：

 1 <!--模板-->
 2 <template>
 3   <div id="home">
 4     <app-header @titleChanged="updateTitle($event)" :title="title"></app-header>
 5     <users :users="users"></users>
 6     <app-footer></app-footer>
 7   </div>
 8 </template>
 9 
10 <!--行为-->
11 <script>
12   //局部注册组件
13   import Users from './Users'
14   import Header from './Header'
15   import Footer from './Footer'
16 
17   export default {
18     name: 'home',
19     data(){
20       return {
21         users:[
22           {name:"Henry",Position:"Java工程师",show:false},
23           {name:"Lily",Position:"Java工程师",show:false},
24           {name:"Kang",Position:"Java工程师",show:false},
25           {name:"Henry",Position:"Java工程师",show:false},
26           {name:"Henry",Position:"Java工程师",show:false}
27         ],
28         title:"这是一个title！"
29       }
30     },
31     methods:{
32       updateTitle:function (title) {
33         this.title = title;
34       }
35     },
36     components:{
37       "users":Users,
38       "app-header":Header,
39       "app-footer":Footer
40     }
41 
42   }
43 </script>
44 
45 <!--样式-->
46 <style >
47 
48   h1{
49     color: pink;
50   }
51 </style>

HelloWorld.vue文件：

 1 <template>
 2   <div class="hello">
 3       hello,world!
 4   </div>
 5 </template>
 6 
 7 <script>
 8 export default {
 9   name: 'HelloWorld',
10   data () {
11     return {
12     }
13   }
14 }
15 </script>
16 
17 <!-- Add "scoped" attribute to limit CSS to this component only -->
18 <style scoped>
19 
20 </style>

　　Header.vue文件：

 1 <template>
 2   <header @click="changeTitle">
 3     <h1>{{title}}</h1>
 4   </header>
 5 </template>
 6 
 7 <script>
 8   export default {
 9     name: 'app-header',
10     data () {
11       return {
12         title1:"Vue.js Demo"
13       }
14     },
15     props:{
16       title:{
17         type:String
18       }
19     },
20     methods:{
21       changeTitle:function(){
22         this.$emit("titleChanged","子向父组件传值");
23       }
24     }
25   }
26 </script>
27 
28 <style scoped>
29 header{
30   background: pink;
31   padding: 10px;
32 }
33 h1{
34   color: #222;
35   text-align: center;
36   }
37 </style>

　　Footer.vue文件：

 1 <template>
 2   <footer>
 3     <p>{{copyright}}</p>
 4   </footer>
 5 </template>
 6 
 7 
 8 <script>
 9   export default {
10     data () {
11       return {
12         copyright:"Copyright 2018 Vue Demo"
13       }
14     }
15   }
16 </script>
17 
18 <style scoped>
19   footer{
20     background: #666;
21     padding: 6px;
22   }
23   footer p{
24     color: pink;
25     text-align: center;
26   }
27 </style>

　　User.vue文件：

 1 <template>
 2   <div class="users">
 3     <ul>
 4       <li v-for="user in users"
 5           @click="user.show = !user.show">
 6         <h2 >{{user.name}}</h2>
 7         <h3 v-show="user.show">{{user.Position}}</h3>
 8       </li>
 9     </ul>
10   </div>
11 </template>
12 
13 <script>
14   export default {
15     name: 'users',
16     // props:['users']
17     props:{
18       users:{
19         type:Array,
20         required:true
21       }
22     }
23   }
24 </script>
25 
26 <style scoped>
27 .users{
28   width: 100%;
29   max-width: 1200px;
30   margin:40px auto;
31   padding: 0 20px;
32   box-sizing: border-box;
33 }
34 ul{
35    display: flex;
36   flex-wrap: wrap;
37   list-style-type: none;
38   padding: 0;
39   }
40 li{
41   flex-grow: 1;
42   flex-basis: 200px;
43   text-align: center;
44   padding: 30px;
45   border: 1px solid #666;
46   margin: 10px;
47 }
48 </style>

然后在App.vue文件中加入导航;

App.vue文件：

 1 <!--模板-->
 2 <template>
 3   <div id="app">
 4     <ul>
 5       <li><a href="/">Home</a></li>
 6       <li><a href="/helloworld">Hello</a></li>
 7       <li> <router-link to="/">Home</router-link> </li>
 8       <li> <router-link to="/helloworld">Hello</router-link> </li>
 9     </ul>
10     <router-view></router-view>
11   </div>
12 </template>
13 <!--行为-->
14 <script>
15 
16 export default {
17   name: 'App',
18   data(){
19     return {
20     }
21   },
22   methods:{
23   }
24 }
25 </script>
26 <!--样式-->
27 <style >
28 
29 </style>