Vue.js框架--路由（十六）

朱雀 2024-02-18 23:40 61阅读 0赞

**主要操作技能：**

官网  
https://router.vuejs.org/

中文网  
https://router.vuejs.org/zh/guide/

vue路由配置：  
1.安装  
cnpm install vue-router --save /npm install vue-router --save  
  
2.引入并Vue.use(VueRouter) (在main.js写)  
import VueRouter from 'vue-router'  
Vue.use(VueRouter);  
  
3.配置路由  
(1)创建组件，引入组件  
import Home from './components/Home.vue' //1.引入组件  
import News from './components/News.vue' //1.引入组件  
  
(2)定义路由  
const routes = \[\{  
path: '/home',  
component: Home  
\},  
\{  
path: '/news',  
component: News  
\}  
\]  
  
(3)实例化VueRouter  
const router = new VueRouter(\{  
routes // (缩写) 相当于 routes: routes  
\})  
  
(4)挂载  
new Vue(\{  
el: '\#app',  
router,  
render: h => h(App)  
\})  
  
(5)将<router-view></router-view>放在根组件的模板App.vue中

编写代码：

Home.vue

<template>
    	
    	<div id="home">
    		<h3>首页组件</h3><br />
    	
    	</div>
    </template>
    
    <script>
    	
    	export default {
    		data() { //数据
    			return {
    				msg: 'I am home component!'
    			}
    		}
    
    	}
    </script>

News.vue

<template>
    	<div id="news">
    		<h2>我是新闻组件</h2><br />
    	</div>
    </template>
    
    <script>
    
    export default {
    		data() {
    			return {
    				msg: '我是新闻组件哦!'
    			}
    		}
    
    	}
    </script>

main.js

App.vue

<template>
    	<div id="app">
    		
    		
    		
    		<router-link to="/home">首页</router-link>
    		<router-link to="/news">新闻</router-link><br />
    
    		
    		
    		<router-view></router-view>
    
    	</div>
    </template>
    
    <script>
    	export default {
    		name: 'app',
    		data() { //业务逻辑的数据
    			return {
    				msg: 'hello'
    			}
    		}
    	}
    </script>

main.js文件配置路由

import Vue from 'vue'
    import App from './App.vue'
    import VueResource from 'vue-resource'
    
    //0.引入vue-router
    import VueRouter from 'vue-router'
    Vue.use(VueRouter);
    Vue.use(VueResource);
    
    //1.创建组件
    import Home from './components/Home.vue' //1.引入组件
    import News from './components/News.vue' //1.引入组件
    import Detail from './components/Detail.vue' //添加详情路由
    import Product from './components/Product.vue' //添加商品路由
    
    //2.配置路由
    const routes = [{
    		path: '/home',
    		component: Home
    	},
    	{
    		path: '/news',
    		component: News
    	},
    	{
    		path: '/detail/:aid',    //动态路由
    		component: Detail
    	},
    	{
    		path: '/product',    //动态路由
    		component: Product
    	},
    	{   //默认跳转路由
    		path: '*',
    		redirect: '/home'
    	}
    ]
    
    //3.实例化VueRouter
    const router = new VueRouter({
    	routes // (缩写) 相当于 routes: routes
    })
    
    //4.挂载路由
    new Vue({
    	el: '#app',
    	router,
    	render: h => h(App)
    })
    
    //5.将<router-view></router-view>根组件的模板App.vue

效果:

![70][]

单击首页

![70 1][]

单击新闻

![70 2][]r

默认跳转路由:

![70 3][]

[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/17bac5a72dce429b8ca00f513554471b.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d43d3009477a42a4a33d76d958257946.png
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0e5303683b2446268f362a2aca48b3c0.png
[70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2f1355c387704908b6f5ee9674a34fc5.png