vue实例讲解之vue-router的使用

最新推荐文章于 2021-09-17 19:00:05 发布

红烧肉在锅里

最新推荐文章于 2021-09-17 19:00:05 发布

阅读量168

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/xx02429/article/details/100099478

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue项目中安装并使用vue-router，包括安装步骤、在main.js中配置路由、创建vueRouter实例以及在组件和根节点的引入。

摘要由CSDN通过智能技术生成

1.安装并且引入vue-router

安装：

cnpm install vue-router --save-dev

mian.js

//0. 使用路由
import VueRouter from 'vue-router'
Vue.use(VueRouter)

配置路由位置

import home from '@/commponent/pages/home'
import ss from '@/commponent/pages/ss'
export default new Router({
  routes: [
   {
      path: '/',
      name: 'mainhome',
      component: mainhome
   },{
      path: '/home',
      name: 'home',
      component:home
  }]
      })

new 一个vueRouter实例，并且将路由配置文件，传到vueRouter实例上去

//3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
	mode: 'history',
	routes // (缩写) 相当于 routes: routes
})

入口文件 挂载实例
// 4. 创建和挂载根实例。
new Vue({
	el: '#app',
	router, // 记得要通过 router 配置参数注入路由，
	render: h => h(App)
})

新建tabnav组件


<template>
	<div class="mainhome">
    <header class="header">
			<router-link to='/home'>首页</router-link>
			<router-link to='/news'>新闻</router-link>
			<router-link to='/ss'>组件</router-link>
		</header>

		<div>
			<!-- 路由匹配到的组件将渲染在这里 -->
			<router-view></router-view>
		</div>
		<div>
			<!-- 路由匹配到的组件将渲染在这里 -->
			
		</div>

	
	</div>
</template>

<script>
	export default {
      name: 'navbar'}
</script>

根节点引入

<template>
	<div id="app">
      <header>
      	<navbar></navbar>
      </header>
	</div>
</template>

<script>
 import navbar from '@/commponent/navbar'
	export default {
		name: 'app',
		 components: {
			navbar
      }
	}
</script>

<style lang="less">
	* {
		margin: 0px;
		padding: 0px;
	}
	
	.header {
		height: 45px;
		background: #000;
		text-align: center;
		line-height: 45px;
		a {
			color: #fff;
			padding: 0px 20px;
			text-decoration: none;
		}
	}
</style>