详解vue route介绍、基本使用、嵌套路由

目录
  • 前言
  • 一、介绍、安装
    • 1.定义
    • 2.安装
  • 二、基本使用(代码后赋)
  • 三、嵌套路由
    • 1.布局逻辑
    • 2.效果展示
    • 3.代码
  • 四、注意

前言

想要学习完整内容请关注主页的专栏————>Vue学习

本次的代码段是结合体,被我分开发文,我以在看代码段时,已经截图展示,所看部分

一、介绍、安装

1.定义

vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。

路由:route 一组key-v的对应关系(路径的改变对应的组件进行切换)

路由器:router 多个路由需要路由器管理

为了实现单页面应用

2.安装

npm i vue-router@3 安装3版本

如果使用 vue ui 就没有以下的操作,因为在创建项目的时候已经配置好了

1:在src根目录创建router目录,在目录中创建index.js,代码如下:

import Vue from 'vue';

//导入vue-router

import VueRouter from 'vue-router'

//应用插件

Vue.use(VueRouter)

//创建router规则对象

const routes = [

]

//创建router

const router = new VueRouter({

routes

})

//导出router

export default router

2:main.js 中进行挂载

import Vue from 'vue'
import App from './App.vue'

import router from './router'

Vue.config.productionTip = false

new Vue({

  router,

  render: h => h(App)
}).$mount('#app')

二、基本使用(代码后赋)

以下例子展现路由的基本使用

css样式已经写好了,直接实现路由效果

展示效果

首先学习的效果

代码(看对应的代码段) app.vue代码,此代码含有样式

<template>
  <div id="root">
			 <div class="main">
				  <div class="header">
					    <h1>路由的演示</h1>
						<button @click="back">后退</button>
				  </div>

			  </div>
			  <div class="main">
				  <div class="left">
				  		<ul>
							<li><router-link to="/about" active-class="hover">公司简介</router-link></li>
							<li><router-link to="/contaactus" active-class="hover">联系方式</router-link></li>
              				<li><router-link to="/persons" active-class="hover">公司人员</router-link></li>
						</ul>
				  </div>
				  <div class="right">
					 <router-view></router-view>
				  </div>
				  <div style="clear: both;"></div>
			  </div>

		</div>
</template>

<script>

export default {
name:'App',
methods: {
 back(){
		this.$router.back()
	}
},

components:{

},
}
</script>

<style>
.c{
	clear: both;
}
*{
		margin: 0px;
		padding: 0px;
	}
	li{
		list-style: none;
	}
	a{text-decoration: none;}
	.main{width: 800px;margin: auto;}
	.header{box-sizing: border-box;padding: 20px;border:1px solid #666;}
	.left{
		height: 500px;
		border: 1px solid #666;
		width: 200px;
		float: left;
	}
	.left li{
		height: 50px;
		line-height: 50px;
		text-align: center;
		border-bottom: 1px solid #666;
		width: 100%;
	}
	.left li a{
		color: #333;display: block;
	}
	.left li a.hover{
		background: blue;color: #fff;
	}

	.right{float: right;
	border:1px solid #61DAFB;
	width: 590px;
	height: 500px;
	}
	.nav li{
		float: left;

	}
	.nav li a{
		width: 150px;
		text-align: center;
		height: 40px;line-height: 40px;
		text-align: center;
		border:1px solid #000000;
		display: block;
	}
	.nav li a.hover{
	background: #0000FF;color: #fff;
	}
</style>

三个路由组件的代码

about

<template>
<div>
    <!-- <div class="left"> -->
    <ul class="nav">
	<li><router-link to="/about/year" active-class="hover">创建年份</router-link></li>
	<li><router-link to="/about/people" active-class="hover">创建人</router-link></li>
    </ul>
    <!-- </div> -->
   <keep-alive include="People">
    <router-view class="c"></router-view>
   </keep-alive> 

</div>
</template>

<script>
export default {
    name: 'About',

    data() {
        return {

        };
    },

    mounted() {

    },

    methods: {

    },
};
</script>

<style scoped>

</style>

ContaactUs

<template>
    <div>
        联系方式
    </div>
</template>

<script>
export default {
    name: 'ContaactUs',

    data() {
        return {

        };
    },

    mounted() {

    },

    methods: {

    },
};
</script>

<style scoped>

</style>

persons

<template>
  <div>
    <ul >
        <li v-for="item in persons" :key="item.id">
        <router-link :to="`/persons/show/${item.id}/${item.realname}`">姓名:{{item.realname}}</router-link>
        <!-- <router-link :to="`/persons/show/?id=${item.id}&realname=${item.realname}`">姓名:{{item.realname}}</router-link> -->
        <!-- <router-link :to="{name:'show',query:{id:item.id,realname:item.realname}}">姓名:{{item.realname}}</router-link> -->
        <button @click="push(item)">点击跳转</button>
        </li>

	</ul>

<hr>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
name:'Persons',
data(){
    return{
        persons:[
            {id:1,realname:'张三'},
            {id:2,realname:'李四'},
            {id:3,realname:'王五'},
            {id:4,realname:'赵六'}
        ]
    }
},
methods: {
  push(item){
    this.$router.push(`/persons/show/${item.id}/${item.realname}`)
  },

},
}
</script>

<style>

</style>

router

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import About from '../pages/About'
import ContaactUs from '../pages/ContaactUs'
import Persons from '../pages/Persons'
// import Show from '../pages/Show'
// import Profile from '../pages/Profile'
// import People from '../pages/People'
const routes = [
  {
    path:'/about',
    component:About,
    children:[
      // {name:'profile',path:'/about/year',component:Profile,meta:{isAuth:true}},
      // {name:'people',path:'/about/people',component:People,meta:{isAuth:true}},
      // {
      //   path:'/about',
      //   redirect:'/about/year'
      // },
]},
 {
  path:'/contaactus',
  component:ContaactUs
},
{
  path:'/persons',
  component:Persons,
  // children:[
  //   {
  //     path:'show/:id/:realname',component:Show,props:true
  //   // name:'show',  path:'show',component:Show
  //   }
  // ]
},
{
  path:'/',
  redirect:'/about'
},
]

const router = new VueRouter({
  mode:'history',
  routes
})

// router.beforeEach((to,from,next)=>{

//   if(to.name=="people" || to.name=="profile"){
// 		if(localStorage.getItem("token")=="123"){
// 			next();
// 		}
// 	}else{
// 		next();
// 	}
// })

// router.beforeEach((to,from,next)=>{

//   if(to.meta.isAuth){
// 		if(localStorage.getItem("token")=="123"){
// 			next();
// 		}
// 	}else{
// 		next();
// 	}
// })

export default router

以上就能实现,视屏上的的切换的路由效果,如果有不懂的,私信问我,源码私聊免费提供

三、嵌套路由

1.布局逻辑

嵌套路由在,最开始的路由下,加入路由

在about路由组件中

再次创建两个路由组件,点击是,获得相对应的内容,实现路由效果

2.效果展示

3.代码

about

<template>
<div>
    <!-- <div class="left"> -->
    <ul class="nav">
	<li><router-link to="/about/year" active-class="hover">创建年份</router-link></li>
	<li><router-link to="/about/people" active-class="hover">创建人</router-link></li>
    </ul>
    <!-- </div> -->
   <keep-alive include="People">
    <router-view class="c"></router-view>
   </keep-alive> 

</div>
</template>

<script>
export default {
    name: 'About',

    data() {
        return {

        };
    },

    mounted() {

    },

    methods: {

    },
};
</script>

<style scoped>

</style>

两个路由组件

Profile

<template>
<div>
    2002 08-20
</div>
</template>

<script>
export default {
    name:'Profile',
    // beforeDestroy () {
    //     console.log('已销毁');
    // },

}
</script>

<style>

</style>

People

<template>
  <div>
      <span>傅小余</span> <input type="text">
  </div>
</template>

<script>
export default {
name:"People",

// beforeDestroy () {
//   console.log('已销毁');
// },
}
</script>

<style>

</style>

四、注意

这里我都使用到了默认路径,所以页面点开就会有展示效果

代码如下

第一个里面的默认

{
  path:'/',
  redirect:'/about'
},

第二个

 {
        path:'/about',
        redirect:'/about/year'
      },

到此这篇关于详解vue route介绍、基本使用、嵌套路由的文章就介绍到这了,更多相关vue route嵌套路由内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue-router:嵌套路由的使用方法

    模板抽离 我们已经学习过了Vue模板的另外定义形式,使用<template></template>. <!-- 模板抽离出来 --> <template id="home"> <div>首页</div> </template> <template id="news"> <div>新闻</div> </template> 然后js里定义路

  • vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带"#"符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置: location / { try_files $uri $uri/ /in

  • 全面解析vue router 基本使用(动态路由,嵌套路由)

    路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮  => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分. 点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么就正好能显示home的内容.这就要在js 文件中配置路由. 路由中有三个基本的概念 route,

  • vue router学习之动态路由和嵌套路由详解

    本文主要参考:https://router.vuejs.org/zh-cn/essentials/nested-routes.html 本文的阅读前提是已经能够搭建一个vue前台程序并且运行.如果还么有搭建可以参考文章: http://www.jb51.net/article/111650.htm 好,下面上货. 首先介绍一下动态路由. 动态路由按照我的理解,就是说能够进行页面的跳转,比如说:下面的这个页面中: <template> <div id="app">

  • vue-router实现嵌套路由的讲解

    一.嵌套路由(配置好父路由component后,在父路由下面添加children属性来配置这个父路由的子路由) 需要注意的是:父组件中的<router-view></router-view>是子组件的占位符是必不可少的 嵌套路由的现象:点击了路由跳转之后父路由组件的内容一直呈现:子路由的内容进行切换,地址栏的路径也随之改变. // 嵌套路由 { path: '/nest', component: () => import('@/nest/nest'), // 嵌套路由的关键字

  • 解决vue-router 嵌套路由没反应的问题

    先看下route.js //route.js const App = () => import('../App.vue'); const Login = () => import('../component/Login.vue'); const Class = () => import('../component/Class.vue'); const CourseList = () => import('../component/CourseList.vue'); const Co

  • vue-router嵌套路由方式(页面路径跳转但页面显示空白)

    目录 如图所示从欢迎页跳转至用户列表 查询相关资料,有两种解决方案 如图所示从欢迎页跳转至用户列表 欢迎页:路径---welcome 用户页:路径---users 可以看到路径发生了跳转,但跳转后的用户列表页面显示空白.路由嵌套代码如下: 查询相关资料,有两种解决方案 1.path路径不用携带/ (未解决) 2.在home页面需添加router-view标签 在home页面的template下添加<router-view> </router-view>后,用户页面占据了整个页面,而

  • 详解vue route介绍、基本使用、嵌套路由

    目录 前言 一.介绍.安装 1.定义 2.安装 二.基本使用(代码后赋) 三.嵌套路由 1.布局逻辑 2.效果展示 3.代码 四.注意 前言 想要学习完整内容请关注主页的专栏————>Vue学习 本次的代码段是结合体,被我分开发文,我以在看代码段时,已经截图展示,所看部分 一.介绍.安装 1.定义 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用. 路由:route 一组key-v的对应关系(路径的改变对应的组件进行切换) 路由器:route

  • 详解vue中$router和$route的区别

    我们在 vue 项目中一般都会用到路由,而 vue-router 是 vue.js 官方的路由管理器. this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, query 等属性. this.$router:全局的 router 实例.通过 vue 根实例中注入 router 实例,然后再注入到每个子组件,从而让整个应用都有路由功能.其中包含了很多属性和对象(比如 history 对象),任何页面也都可以调用其 push(

  • 详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结

    如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. Vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的. 场景: var vm = new Vue({ data:{}, // 页面不会变化 template: '<div>{{message}

  • 详解VUE 数组更新

    1.数据方法分类: (1)原数组改变 push  pop  unshift  shift  reverse  sort  splice (2)原数组未变,生成新数组 slice  concat  filter 对于使原数组变化的方法,可以直接更新视图. 对于原数组未变的方法,可以使用新数组替换原来的数组,以使视图发生变化. 示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&

  • 详解vue 路由跳转四种方式 (带参数)

    1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

  • 详解vue高级特性

    Vue为我们提供了很多高级特性,学习和掌握它们有助于提高你的代码水平. 一.watch进阶 从我们刚开始学习Vue的时候,对于侦听属性,都是简单地如下面一般使用: watch:{ a(){ //doSomething } } 实际上,Vue对watch提供了很多进阶用法. handler函数 以对象和handler函数的方式来定义一个监听属性,handler就是处理监听变动时的函数: watch:{ a:{ handler:'doSomething' } }, methods:{ doSomet

  • 详解vue路由

    前端路由和后端路由: 后端路由:对于普通的网站,所有的超链接都是url地址,所有url都对应服务器上对应的资源 前端路由:对于单页面应用程序来说,主要通过url的hash(#)来实现不同页面的切换,同时hash还有一个特点HTTP请求中不会包含hash相关的内容,所以单页面程序中的页面跳转主要用hash实现 在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由 路由的使用 1.创建一个路由对象,当导入vue-router包之后,在window全局对象中就有一个路由的构造函

  • 详解Vue中$props、$attrs和$listeners的使用方法

    目录 背景 一.文档描述 二.具体使用 三.总结 背景 现在我们来讨论一种情况,父组件与孙子组件怎么通信,我们有多少种解决方案? 我们使用VueX来进行数据管理,但是如果项目中多个组件共享状态比较少,项目比较小,并且全局状态比较少,那使用VueX来实现该功能,并没有发挥出VueX的威力. 使用B来做中转站,当A组件需要把信息传给C组件时,B接受A组件的信息,然后利用属性传给C组件, 这是一种解决方案,但是如果嵌套的组件过多,会导致代码繁琐,代码维护比较困难;如果C中状态的改变需要传递给A, 使用

  • 详解vue 模版组件的三种用法

    本文介绍了详解vue 模版组件的三种用法,分享给大家,具体如下: 第一种 //首先,别忘了引入vue.js <div id="user_name_01"></div> <script src="../node_modules/vue/dist/vue.js"></script> <script> var User_01 = Vue.extend({// 创建可复用的构造器 template: '<p&

  • 详解 vue.js用法和特性

    前  言 最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大. Vue.js是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不同的是,Vue 从根本上采用最小成本.渐进增量(incrementally adoptable)的设计.Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动. Vue.j

随机推荐