入门
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue路由</title>
<style>
<!-- 设置路由高亮样式 -->
.myActive {
color: red
}
</style>
</head>
<body>
<div id="app">
<!-- 方式一 -->
<!-- 对应path，这个地方href后的地址必须以#开头，不想使用#开头可以使用方式二 -->
<a href="#/login">登录</a>
<a href="#/register">注册</a>
<br />
<!-- 方式二 -->
<!-- <router-link>默认会被渲染成一个<a>标签，可以使用tag指定标签 -->
<router-link to="/login" tag="button">登录</router-link>
<router-link to="/register">注册</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<!-- 导入js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 组件的模版对象
var login = {
template: "<h1>这是登录组件</h1>"
}
var register = {
template: "<h1>这是注册组件</h1>"
}
// 创建VueRouter实例
var routerObj = new VueRouter({
// 路由匹配规则
routes: [
// 属性1-path：表示监听的路由链接地址
// 属性2-component：表示匹配到规则后对应展示的组件，必须是一个组件模版对象，不能是组件的引用名称
{ path: "/login", component: login },
{ path: "/register", component: register }
],
// 设置选中路由时高亮的样式，默认样式名是router-link-active
linkActiveClass: "myActive"
})
var vue = new Vue({
el: "#app",
// 注册路由
router: routerObj
})
</script>
</body>
重定向&路由传值
<body>
<div id="app">
<!-- 路由传参-query -->
<router-link to="/query?id=10&name=rick">query</router-link>
<br />
<!-- 路由传参-params -->
<router-link to="/params/12/tom">params</router-link>
<br />
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
var query = {
template: "<h1>query传参{{$route.query.id}}:{{$route.query.name}}</h1>",
created() {
console.log(this.$route.query)
}
}
var params = {
template: "<h1>params传参{{$route.params.id}}:{{$route.params.name}}</h1>",
created() {
console.log(this.$route.params)
}
}
// 创建VueRouter实例
var routerObj = new VueRouter({
// 路由匹配规则
routes: [
// 属性1-path：表示监听的路由链接地址
// 属性2-component：表示匹配到规则后对应展示的组件，必须是一个组件模版对象，不能是组件的引用名称
{ path: "/query", component: query },
// params传参
{ path: "/params/:id/:name", component: params },
// 重定向，指定一开始展示的组件
{ path: "/", redirect: "/query" }
]
})
var vue = new Vue({
el: "#app",
// 注册路由
router: routerObj
})
</script>
</body>
路由嵌套
<body>
<div id="app">
<router-link to="/account">account</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<template id="temp1">
<div>
<h1>这是account组件</h1>
<router-link to="/account/login">登录</router-link>
<router-link to="/account/register">注册</router-link>
<router-view></router-view>
</div>
</template>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 组件的模版对象
var account = {
template: "#temp1"
}
// 创建VueRouter实例
var routerObj = new VueRouter({
// 路由匹配规则
routes: [
{
path: "/account",
component: account,
// 使用children属性实现路由嵌套
children: [
// 子路由的path前面不要带/，否则永远以根路径开始请求
{ path: "login", component: login },
{ path: "register", component: register }
]
}
]
})
var vue = new Vue({
el: "#app",
// 注册路由
router: routerObj
})
</script>
</body>
一个路径对应多个路由组件
<body>
<div id="app">
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
<!-- 指定name -->
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 组件的模版对象
var header = {
template: "<h1>header头部信息</h1>"
}
var leftBox = {
template: "<h1>left侧边栏</h1>"
}
var mainBox = {
template: "<h1>main主体区域</h1>"
}
// 创建VueRouter实例
var routerObj = new VueRouter({
// 路由匹配规则
routes: [
{
path: "/",
components: {
default: header,
left: leftBox,
main: mainBox
}
}
]
})
var vue = new Vue({
el: "#app",
// 注册路由
router: routerObj
})
</script>
</body>
使用watch监听路由改变
<body>
<div id="app">
<!-- <router-link>默认会被渲染成一个<a>标签，可以使用tag指定标签 -->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<!-- 导入js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 组件的模版对象
var login = {
template: "<h1>这是登录组件</h1>"
}
var register = {
template: "<h1>这是注册组件</h1>"
}
// 创建VueRouter实例
var routerObj = new VueRouter({
// 路由匹配规则
routes: [
// 属性1-path：表示监听的路由链接地址
// 属性2-component：表示匹配到规则后对应展示的组件，必须是一个组件模版对象，不能是组件的引用名称
{ path: "/login", component: login },
{ path: "/register", component: register }
]
})
var vue = new Vue({
el: "#app",
// 注册路由
router: routerObj,
// 使用这个属性,可以监听data中指定数据的变化,然后触发watch中对应的function函数
watch: {
// 监听路由的改变
// 第一个参数最新的值,第二个参数旧的值
"$route.path": function (newVal, oldVal) {
console.log("新的路由:" + newVal)
console.log("旧的路由:" + oldVal)
}
}
})
</script>
</body>
