vue路由
vue是一个单页面应用 我们页面其实是由组件组成 我们想要是要页面到页面之间跳转
我们只能通过vue组件进行模拟页面之间跳转
跳转过程 我们就需要使用vue-router
使用:
1 使用npm安装
npm install vue-router --save-dev
2 使用cdn进行外部引入
https://unpkg.com/vue-router@3.0.0/dist/vue-router.js
vue中组件分为两种
1 普通组件
2 路由组件
区别:
普通组件需要注册(全局 局部)
路由组件不需要可以直接使用
普通组件和路由组件区分
在路由中配置的组件 都是路由组件 剩余的全部普通组件
vue路由配置流程
1 创建组件配置对象
2 路由配置
3 创建路由配置对象
4 将router添加到new vue中
5 在组件模板中添加router-view组件 对应的路由组件就会被渲染到router-view组件中
eg:
<body>
<!--
vue路由
vue是一个单页面应用 我们页面其实是由组件组成 我们想要是要页面到页面之间跳转
我们只能通过vue组件进行模拟页面之间跳转
跳转过程 我们就需要使用vue-router
使用:
1 使用npm安装
npm install vue-router --save-dev
2 使用cdn进行外部引入
https://unpkg.com/vue-router@3.0.0/dist/vue-router.js
vue中组件分为两种
1 普通组件
2 路由组件
区别:
普通组件需要注册(全局 局部)
路由组件不需要可以直接使用
普通组件和路由组件区分
在路由中配置的组件 都是路由组件 剩余的全部普通组件
vue路由配置流程
1 创建组件配置对象
2 路由配置
3 创建路由配置对象
4 将router添加到new vue中
5 在组件模板中添加router-view组件 对应的路由组件就会被渲染到router-view组件中
-->
<div id="app">
<!-- router-link 相当于html中a标签 to属性相当href -->
<router-link to="/list">列表</router-link>
<router-link to="/detail">详情</router-link>
<!-- 匹配到路由组件最终显示的地方 -->
<router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
// 1 创建组件配置对象
const list={
template: `
<div class="list">列表页</div>
`
}
const detail={
template: `
<div class="detail">详情页</div>
`
}
// 2 路由配置
const routes=[
{
path: '/list', // 自定义的路由跳转路径
component: list
},
{
path: '/detail',
component: detail
}
]
// 3 创建路由配置对象
const router=new VueRouter({
// routes: routes
routes
})
// 4 把router挂载到new Vue实例中
new Vue({
el: "#app",
// router: router,
router,
data: {
}
})
</script>
</body>
vue动态路由匹配
当多个path路径需要指向同一个路由组件的时候 我们就可以使用动态路由匹配
两个路由地址
routes中的path:后要加 :id(自定义)
const routes=[
{
path: '/',
component: list
},
{
path: '/list/:id', // 当前的路由中的 :id代表的是一个动态值 可以匹配 /list/1 /list/2 /list/name
component: detail
}
]
嵌套路由
一个路由组件中 嵌套并渲染了一个新的路由组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
嵌套路由
一个路由组件中 嵌套并渲染了一个新的路由组件
-->
<div id="app">
<router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
const user={
template: `
<div class="user">
user
<router-view></router-view>
</div>
`
}
const profile={
template: `
<div class="profile">
profile
<router-view></router-view>
</div>
`
}
const posts={
template: `
<div class="posts">posts</div>
`
}
const item={
template: `
<div class="a">a页面</div>
`
}
const routes=[
{
path: '/user/:name', // /user/foo /user/bar
component: user,
children: [
{
path: 'profile', // /user/:name/profile
component: profile,
children: [
{
path: 'name', // /user/:name/profile/name
component: item
}
]
},
{
path: 'posts', // /user/:name/posts
component: posts
}
]
},
]
const router=new VueRouter({
routes
})
new Vue({
el: "#app",
router,
data: {
}
})
</script>
</body>
</html>