Vue 的路由
前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时hash有一个特点: HTTP请求中不会包含hash相关的内容;所以，单页面程序中的页面跳转主要用hash实现。
Vue-Router的基本使用
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<!-- 导入路由模块，它依赖于vue.js -->
<script src="../js/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 4.在页面中放入router-view标签 -->
<!-- 这个标签是vue-router提供的 -->
<router-view></router-view>
<hr />
<h2>router-link的使用</h2>
<!-- 这个标签也是Vue-Router提供的，用于路由跳转,可以用tag属性指定它被渲染为什么标签 -->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
</div>
<script>
var home = {
template: '<div><h1>首页组件</h1><a href="#/login">登录</a><a href="#/register">注册</a></div>'
}
var login = {
template: '<h1>登录组件</h1>'
}
var register = {
template: "<h2>注册组件</h2>"
}
//2. 创建一个路由对象，当导入Vue-router包之后，在window对象中就有了一个路由的构造函数，叫做VueRouter
//在new 对象的时候可以为构造函数，传递一个配置对象
var routerObj = new VueRouter({
//表示路由匹配规则
routes: [{
//每个路由规则，都是一个对象，这个对象有两个必要的属性。
//属性1：path，表示监听那个路连接地址；
//属性2：component，表示，如果路由是前面匹配到的path，则展示component对应的组件。
path: '/login',
component: login //这里必须是一个组件模板对象，而不是组件的引用名称
},
{
path: '/register',
component: register
},
{
path: '/',
//redirect:'/login' 前端重定向，不用指定component
component: home
}
]
});
var vm = new Vue({
el: '#app',
data: {},
computed: {},
//3. 将路由规则对象注册到vue实例上，用来监听Url地址的变化，然后展示对应的组件
router: routerObj
})
</script>
</body>
</html>
路由传参
- 通过query方式传参
- 通过params
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
<router-link to="/login">登录</router-link>
<router-link to="/register/10/ls">注册</router-link>
</div>
<script>
var login = {
//通过$route.query可以获取url?后面的参数
template: '<h1>登录组件---{{$route.query.id}}</h1>'
}
var register = {
template: "<h2>注册组件----{{$route.params.id}}---{{$route.params.name}}</h2>"
}
var router = new VueRouter({
routes: [{
path: '/login',
component: login
},
{
path: '/register/:id/:name',
// path: '/register/',
component: register
}
]
});
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router,
created() {
console.log(this.$route);
}
});
</script>
</body>
</html>
路由嵌套
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：
/user/foo/profile /user/foo/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系。
要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})
注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
命名路由
有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
这跟代码调用 router.push() 是一回事：
router.push({ name: 'user', params: { userId: 123 }})
这两种方式都会把路由导航到 /user/123 路径。
嵌套命名视图
我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套 router-view 组件。
<!DOCTYPE html>
<html lang="zh-cn" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
</head>
<body class="h-100">
<div id="app" class="h-100">
<router-view class="bg-primary h-25 m-0 p-0"></router-view>
<div class="row h-75 m-0">
<router-view name="left" class="float-left bg-danger col-4 h-100"></router-view>
<router-view name="main" class="float-left bg-success col-8"></router-view>
</div>
</div>
<script>
var left = {
//通过$route.query可以获取url?后面的参数
template: '<div><h2>left</h2></div>'
}
var main = {
template: "<div><h2>main</h2></div>"
}
var header = {
template: "<div><h2>header</h2></div>"
}
var router = new VueRouter({
routes: [{
path: "/",
components: {
default: header,
left: left,
main: main
}
}]
});
var vm = new Vue({
el: '#app',
data: {},
methods: {},
router,
created() {
console.log(this.$route);
}
});
</script>
</body>
</html>