//获取当前路由地址
this.$route.path
//编程式路由
this.$router.push("路由地址");
简单使用
<body>
<div id="app">
<!--2. 添加路由链接-->
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
<!--3. 添加路由占位符-->
<router-view> </router-view>
</div>
</body>
<!--1. 引入库文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
// 4. 创建路由组件
var componentRouter1 = {
template: "<h1>我是路由1 - 用户</h1>"
}
var componentRouter2 = {
template: "<h1>我是路由2 - 注册</h1>"
}
// 5. 配置规则并创建路由对象
var myRouter = new VueRouter({
routes: [
// componet属性需要的是组件对象
{
path:"/user", component: componentRouter1},
{
path:"/register", component: componentRouter2}
]
})
var vue = new Vue({
// 6. 挂载路由
el: "#app",
router: myRouter
})
</script>
路由重定向
<script>
var myRouter = new VueRouter({
routes: [
//当用户访问/路径时，强制跳转到/user这个路由地址
{
path:"/", redirect:"/user"},
{
path:"/user", component: componentRouter1},
{
path:"/register", component: componentRouter2}
]
})
</script>
嵌套路由
<!--1. 引入库文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
// 4. 创建路由组件
var componentRouter1 = {
template: "<h1>我是路由1 - 用户</h1>"
}
var componentRouter2 = {
template: `
<div>
<h1>我是路由2 - 注册</h1>
<hr>
<router-link to="/register/firstSon">子路由1</router-link>
<router-link to="/register/secondSon">子路由2</router-link>
<router-view></router-view>
</div>
`
}
var sonRouter1 = {
template:"<h1>我是路由2下的子路由1内容</h1>"
}
var sonRouter2 = {
template:"<h1>我是路由2下的子路由2内容</h1>"
}
// 5. 配置规则并创建路由对象
var myRouter = new VueRouter({
routes: [
//当用户访问/路径时，强制跳转到/user这个路由地址
{
path:"/", redirect:"/user"},
{
path:"/user", component: componentRouter1},
{
path:"/register",
component: componentRouter2,
children:[ {
path: "/register/firstSon",
component: sonRouter1
},{
path: "/register/secondSon",
component: sonRouter2
} ]
}
]
})
var vue = new Vue({
// 6. 挂载路由
el: "#app",
router: myRouter
})
</script>
动态路由
<javascript>
// 伪代码
routers: [
｛ path : "/user/1" component: userComp },
｛ path : "/user/2" component: userComp },
｛ path : "/user/3" component: userComp },
]
</javascropt>
<javascript>
var vue = new Vue({
routers:[{
{path:"/iser/:id", component: userComp }
}]
})
</javascropt>
<body>
<div id="app">
<!--2. 添加路由链接-->
<router-link to="/user/1">User</router-link>
<router-link to="/user/2">Register</router-link>
<!--3. 添加路由占位符-->
<router-view>
</router-view>
</div>
</body>
<!--1. 引入库文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
// 4. 创建路由组件 - 获取动态路由的数据
var componentRouter = {
template: "<h1>我是路由1地址：user/{
{$route.params.id}}</h1>"
}
// 5. 配置规则并创建路由对象
var myRouter = new VueRouter({
routes: [
//动态路由
{
path:"/", redirect:"/user/1"},
{
path:"/user/:id", component: componentRouter},
]
})
var vue = new Vue({
// 6. 挂载路由
el: "#app",
router: myRouter
})
</script>
<body>
<div id="app">
<!--2. 添加路由链接-->
<router-link to="/user/1">User</router-link>
<router-link to="/user/2">Register</router-link>
<!--3. 添加路由占位符-->
<router-view>
</router-view>
</div>
</body>
<!--1. 引入库文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
// 4. 创建路由组件
var componentRouter = {
template: "<h1>我是路由1地址：user/{
{id}}</h1>",
props: {
id: {
default: 0,
type: String
}
}
}
// 5. 配置规则并创建路由对象
var myRouter = new VueRouter({
routes: [
//当用户访问/路径时，强制跳转到/user这个路由地址
{
path:"/", redirect:"/user/1"},
{
path:"/user/:id", component: componentRouter, props: true},
]
})
var vue = new Vue({
// 6. 挂载路由
el: "#app",
router: myRouter
})
</script>
<body>
<div id="app">
<!--2. 添加路由链接-->
<router-link to="/user/1">User</router-link>
<router-link to="/user/2">Register</router-link>
<!--3. 添加路由占位符-->
<router-view>
</router-view>
</div>
</body>
<!--1. 引入库文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
// 4. 创建路由组件
var componentRouter = {
template: "<h1>我是路由1地址：user/{
{id}} -- 其他值{
{name}}、{
{age}}</h1>",
props: ["id", "name", "age"]
}
// 5. 配置规则并创建路由对象
var myRouter = new VueRouter({
routes: [
//当用户访问/路径时，强制跳转到/user这个路由地址
{
path:"/", redirect:"/user/1"},
{
path:"/user/:id",
component: componentRouter,
props: (route) => {
return {
name: 'lrc',
age: 20,
id: route.params.id
}
}
}
]
})
var vue = new Vue({
// 6. 挂载路由
el: "#app",
router: myRouter
})
</script>
命名路由
<body>
<div id="app">
<!--2. 添加路由链接-->
<router-link :to="{name:'user', params:{id:1}}">User</router-link>
<router-link to="/user/2">Register</router-link>
<!--3. 添加路由占位符-->
<router-view>
</router-view>
</div>
</body>
<!--1. 引入库文件-->
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
// 4. 创建路由组件
var componentRouter = {
template: "<h1>我是路由{
{id}}地址：user/{
{id}} -- 其他值{
{name}}、{
{age}}</h1>",
props: ["id", "name", "age"]
}
// 5. 配置规则并创建路由对象
var myRouter = new VueRouter({
routes: [
//当用户访问/路径时，强制跳转到/user这个路由地址
{
path:"/", redirect:"/user/1"},
{
path:"/user/:id",
name: "user",
component: componentRouter,
props: (route) => {
return {
name: 'lrc',
age: 20,
id: route.params.id
}
}
}
]
})
var vue = new Vue({
// 6. 挂载路由
el: "#app",
router: myRouter
})
</script>
编程式导航
<script type="text/javascript">
// 4. 创建路由组件
var componentRouter = {
template: `
<div>
<h1>我是路由{
{id}}地址：user/{
{id}} -- 其他值{
{name}}、{
{age}}</h1>
<button v-on:click="jump">跳转到/user/2组件</button>
</div>`,
props: ["id", "name", "age"],
methods: {
jump : function() {
this.$router.push("/user/2")
}
}
}
// 5. 配置规则并创建路由对象
var myRouter = new VueRouter({
routes: [
//当用户访问/路径时，强制跳转到/user这个路由地址
{
path:"/", redirect:"/user/1"},
{
path:"/user/:id",
name: "user",
component: componentRouter,
props: (route) => {
return {
id: route.params.id,
name: 'lrc',
age: 20
}
}
}
]
})
var vue = new Vue({
// 6. 挂载路由
el: "#app",
router: myRouter,
})
</script>
路由前置守卫
//to: 目的
//form:从哪里来的
//next() 放行
router.beforeEach((to,from,next)=>{
var targetPath = to.path;
if(targetPath=="/my"){
next("/login"); // 跳转到其他路由路径
}else{
next(); //等价于放行
}
})