vue路由基础

vue路由基础

摘录自 “ 一个前端小小白 ”,请支持原作者

1----vue-router内置组件

router-link

类似于a标签，用于在单页面之间的跳转，默认渲染为a标签

1. to属性,后面跟着用于跳转的路径
2. tag属性，指定渲染成指定的标签（tab=“p”）
3. router-link-active,自动激活的class名称，当·to·属性的值和地址栏路径相同自动激活该属性。
4. linkActiveClass,自定义属性名称，在路由(reouter)的index.js中修改

const router = new VueRouter({
	linkActiveClass:'active',
	//添加linkActiveClass修改router-link-active成属性名称
	routes
})

2----页面之间的传值

1.query传值

通过 html?id 这种写法传值（query传值）

//向/about页面传递值
<div class="na" v-for="(item,index) in list" :key="item.name">
	<router-link :to="`/about?${item.id}&{item.name}`">
			//&间隔分隔传递的多个值
		// 通过?${item.name}将名字传递到/about的浏览栏上 -->
		{{item.name}}
	router-link>
div>

/about 页面可以通过this的$route的query获取到传递的值

created(){
	//打印出传递的值
	console.log(this.$route.query)
},

2.动态路由传值

在router路由的 index.js 文件中创建动态路由

{
	//动态路由写法
	//path:'/info:tit',单个传递
	path:'/info:id/:name',//传递多个值
	component:Info
 }

需要传递值的页面进行传递

<router-link to="/info/这是传递的值1id/这是传递的值2name">
//to="/info:id  单个值传递
	跳转动态路由页面
router-link>

/info 页面对传递的值进行接收

created(){
	//通过params进行接收
	console.log(this.$route.params)
}

3----嵌套路由

一个页面中有多个子页面，就是嵌套路由
在注册路由的时候将路由定义 children:[子路由]

路由重定向，默认显示xxx路由

{
    path: '/',
    name: 'Home',
    component: Home,
    redirect："/name/a",
	children:[
		{
			path:'a',
			component:a
		},
		{
			path:'b',
			component:b
		},
		{
			path:'c',
			component:c
		}
	]
  },

在主页面调用

<router-link to="/Home/a">a页面router-link> 跳转a页面
<router-link to="/Home/b">b页面router-link> 跳转b页面
<router-link to="/Home/c">c页面router-link> 跳转c页面
<router-view>
	标签渲染a/b/c子路由页面
router-view>

路由别名，声明多个名字也可访问该路由页面

{
    path: '/',
    name: 'Home',
	//给路由起别名,别名访问也可进去该路由页面
	alias:['/home','/home1']
    component: Home
  },

跳转

about页面

jquery传值

about页面

动态路由传值，
并不能直接传值，要将path修改为name，利用name进行传递

about页面

{
    path: '/about',
    name: 'about',
    component: about
	
  },

5----$route和$router

$route

this.$route//是当前路由对象，用于获取当前路由里面的属性和方法

$router

this.$router//是所有路由对象可以理解为routes

$router 也可以进行页面跳转

//1.
this.$router.push('/about')
//2.
this.$router.push({path: '/about'})
//3.跳转动态路由
this.$router.push({path: '/about/6/张三'})
//4.
this.$router.push({name: '/about',params:{id:6,name:'张三'}})
//5.跳转传值
this.$router.push("/about?id=7")
//6.跳转(去哪?)
$router.go(-1)
//7.回退
$router.back()
//8.前进
$router.forward()
//9.替换当前页面，不留历史记录
$router.replace()

原文链接