vue-router-2

最新推荐文章于 2024-11-04 14:35:19 发布

i am lzy

最新推荐文章于 2024-11-04 14:35:19 发布

阅读量163

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/liuzeyunb/article/details/138482661

版权

6.2 路由的基本使用

前端路由

前端路由： key 是路径，value 是组件

1.基本使用

1.安装vue-router，命令: npm i vue-router

2.应用插件: Vue.use(VueRouter)

3.编写router配置项:

src/router/index.js

//引入VueRouter
	import VueRouter from 'vue-router

//引入 路由 组件
	import About from "../components/About
	import Home from"../components/Home

//创建router实例对象，去管理一组一组的路由规则
const router =new VueRouter({
	routes:[
		{
			path:"/about'，
			component :About
		}
		{
			path:"/home'，
			component :Home
		}
	]
})

//暴露router
export default router

实现切换(active-class可配置高亮样式)

<router-link active-class="active" to="/about">About</router-link>

在这里插入图片描述

2.几个注意点

1.路由组件通常存放pages文件夹，一般组件通常存放在components文件夹

2.通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。

3.每个组件都有自己的 $route 属性，里面存储着自己的路由信息.

4.整个应用只有一个router，可以通过组件的 $router 属性获取到。

3.嵌套路由(多级路由)

1.配置路由规则，使用children配置项:

routes :[
    {
        path:"/about',
		component :About,
    },
    {
        path:'/home',
        component :Home,
        children:[ //通过children配置子级路由
            {
                path:'news'，//此处一定不写斜杠:/news
                component:News
            },
            {
               path:'message',//此处一定不要写:/message
               component:Message 
            }
         ]
    }
]

2.跳转(要写完整路径)

<router-link to="/home/news">News</router-link>

4.路由的query参数

1.传递参数

<!--跳转并携带query参数，to的 字符串 写法-->
  //query会接收到 问号？后面的值，query是一个对象
	// query：{id：666，title：“你好“}
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>

<!--跳转并携带query参数，to的 对象 写法 -->
<router-link
	:to="{
		path:'/home/message/detail',
		query:{
			id:666,
			title:'你好
        }
}"
>跳转</router-link>