【Vue 2.x】学习vue之三路由

Vue

这是v2版

三路由

第十章

vue中的路由

elementUI的使用

1、vue中的路由

作用：主要是为了实现‘SPA-单页面应用’，根据请求的地址，呈现不同的组件


route：路由（线路）
router：路由器

vue的应用分为

a、多页面应用

		一个页面由多个子页面构成

b、单页面应用

	SPA应用：单页面应用
				1、 单页 Web 应用（single page web application，SPA）。
                2. 整个应用只有一个完整的页面。
                3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
                4. 数据需要通过 ajax 请求获取。

2、路由的基本应用

1、基础

1、导入素材
2、导入外部样式文件
		一般导入到public/css目录下
		
3、在public/index.html导入样式文件，所有vue组件即可应用这些样式
	   <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
	   <%= BASE_URL %>---public/

4、创建两个组件
		 about，home
	
5、修改app.vue中的代码，在页面创建：‘路由组件中的展示区’
	       <!-- 路由展示区 -->
           <router-view></router-view>
              
6、修改app.vue中的代码，在页面创建：‘路由组件中的导航区’
		将页面中的超链接替换：
			<a class="list-group-item" href="./about.html">About</a>
            <a class="list-group-item active" href="./home.html">Home</a>
         替换后：
            <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
            

2、使用

 7、使用路由
 		a、安装路由组件
 			npm i vue-router------->路由4.0--->vue3.0
 			npm i vue-router@3----->路由3.0--->vue2.0
         
        b、在src目录下编写route目录以及index.js文件，该文件用于指定路由规则
        		//导入路由插件
                import VueRouter from "vue-router";
                //导入home组件以及about组件
                import home from '../components/home'
                import about from '../components/about'
                import {
    component } from "vue/types/umd";

                //创建路由器指定规则，并暴露路由规则
                export default new VueRouter({
   
                    //指定路由规则
                    routes:[
                        {
   
                            //请求地址是/home
                            path:"/home",
                            //在路由展示区中显示哪一个组件
                            component:home
                        },
                        {
   
                            //请求地址是/about
                            path:"/about",
                            //在路由展示区中显示哪一个组件
                            component:about
                        },
                    ]
                })

3、加载

  8、在main.js文件中加载路由组件
            import Vue from 'vue'
            import App from './App.vue'
            //引入路由插件
            import VueRouter from 'vue-router'
            //引入路由index.js
            import router from './route/index'
            //使用路由插件
            Vue.use(VueRouter)
            Vue.config.productionTip = false
            new Vue({
   
              render: h => h(App),
              //在实例中配置路由器
              router: router,
            }).$mount('#app')

3、vue组件的分类

1、普通组件

这类组件使用与路由无关---->存放在components目录

2、路由组件

这类组件是点击路由连接跳转以后显示的组件---->存放在views目录

4、路由的嵌套