路由的注册:不推荐直接使用to
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
</head>
<body>
<div id="app">//这是显示到页面
<router-link to="/">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-link to="/user">用户管理</router-link>
<div>承载的空间,不起名为默认三个都可以使用
<router-view></router-view>
</div>
</div>
<script>
let routes = [
{
path:'/',
component:{template:`<div><h1>这是首页</h1></div>`}
},
{
path:'/about',
component:{template:`<div><h1>关于我们</h1></div>`}
},
{
path:'/user',
component:{template:`<div><h1>用户管理</h1></div>`}
},
];//页面显示的内容
let router = new VueRouter({
routes:routes //实例化vuerouter
});
const app = new Vue({
el:'#app',
router:router //注册router
})
</script>
</body>
</html>
路由的命名及视图:推荐使用name 适用于对于头和尾的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
<style>
.fooder{
position: fixed;
bottom: 0;
}
</style>
</head>
<body>
<div id="app">
<router-link :to={name:"index"}>首页</router-link>
<router-link :to={name:"about"}>关于我们</router-link>
<router-link to="/user">用户管理</router-link>
<div>
<router-view name="header"></router-view>
<router-view name="fooder" class="fooder"></router-view>
<router-view></router-view>
</div>
</div>
<script>
let routes = [
{
path:'/',
name:'index',
components:{header:{template:`<div><h1>头部</h1></div>`},
fooder:{template:`<div><h1>底部</h1></div>`}}
},
{
path:'/about',
name:'about',
component:{template:`<div><h1>关于我们</h1></div>`}
},
{
path:'/user',
component:{template:`<div><h1>用户管理</h1></div>`}
},
];
let router = new VueRouter({
routes:routes
});
const app = new Vue({
el:'#app',
router:router
})
</script>
</body>
</html>
路由的参数:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
<style>
.fooder{
position: fixed;
bottom: 0;
}
</style>
</head>
<body>
<div id="app">
<!--可以复用,name匹配下边的userinfo以及参数-->
<router-link :to={name:"index"}>首页</router-link>
<router-link :to={name:"about"}>关于我们</router-link>
<router-link :to={name:"index"}>跳转首页</router-link>
<router-link :to="{name:'userinfo',params:{name:'alex'},query:{age:48}}">用户管理</router-link>
<div>
<router-view name="header"></router-view>
<router-view name="fooder" class="fooder"></router-view>
<router-view></router-view>
</div>
</div>
<script>
let routes = [
{
path:'/',
name:'index',
components:{header:{template:`<div><h1>头部</h1></div>`},
fooder:{template:`<div><h1>底部</h1></div>`}}
},
{
path:'/about',
name:'about',
component:{template:`<div><h1>关于我们</h1></div>`}
},
{
path:'/user/:name',
name:'userinfo',
component:{template:`<div><h1>{{username}}的年龄是{{age}}</h1></div>`,//赋值操作
data(){
return {
username:this.$route.params.name,
age:this.$route.query.age,//取值操作
}
},
},},
];
let router = new VueRouter({
routes:routes
});
const app = new Vue({
el:'#app',
router:router
})
</script>
</body>
</html>
路由的钩子,有很多的钩子这里举得例子是router.beforeEach(to, from, next),to准备去哪,from 来自哪 ,next执行(),查看生命周期会有更多的钩子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/login">关于我们</router-link>
<router-link to="/user">用户管理</router-link>
<router-link to="/vip">vip管理</router-link>
<div>
<router-view></router-view>
</div>
</div>
<script>
let routes = [
{
path: "/",
component: {
template: `<div><h1>这是首页</h1></div>`
}
},
{
path: "/login",
component: {
template: `<div><h1>关于我们</h1></div>`
}
},
{
path: "/user",
component: {
template: `<div>
<h1>用户管理</h1>
<router-link :to="{name:'more'}">用户详情</router-link>
<router-link :to="{name:'mores'}">用户更多详细信息</router-link>
</div>`, },
children:[
{
path:"more",
name:'more',
meta:{
required_login:true
},
component:{
template:`<div><h1>用户详细信息</h1></div>`
}
},
{
path:"mores",
name:'mores',
meta:{
required_login:true
},
component:{
template:`<div><h1>用户更多详细信息</h1></div>`
}
},
]
},
{
path:"/vip",
meta:{
required_login:true
},
component:{
template:`<div><h1>vip管理</h1></div>`
}
}
];
let router = new VueRouter({
routes: routes
});
router.beforeEach(function (to,from,next) {
if(to.meta.required_login){
next('/login')
}else{
next()
}
});
const app = new Vue({
el: "#app",
router: router,
})
</script>
</body>
</html>
生命周期代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
</head>
<body>
<div id="app">
{{name}}
</div>
<script>
const app = new Vue({
el: "#app",
data: {
name: "alex",
},
methods: {
init: function () {
return 1
}
},
beforeCreate(){
console.group("bebeforeCreate ########")
console.log("data##", this.$data)
console.log("el##", this.$el)
console.log("msg##", this.name)
console.log("func##", this.init)
},
created(){
console.group("Create ########")
console.log("data##", this.$data)
console.log("el##", this.$el)
console.log("msg##", this.name)
console.log("func##", this.init)
},
beforeMount(){
console.group("beforeMount ########")
console.log("data##", this.$data)
console.log("el##", this.$el)
console.log("msg##", this.name)
console.log("func##", this.init)
},
mounted(){
console.group("mounted ########")
console.log("data##", this.$data)
console.log("el##", this.$el)
console.log("msg##", this.name)
console.log("func##", this.init)
},
beforeUpdate(){
console.group("beforeUpdate ########")
console.log("data##", this.$data)
console.log("el##", this.$el)
console.log("msg##", this.name)
console.log("func##", this.init)
},
updated(){
console.group("updated ########")
console.log("data##", this.$data)
console.log("el##", this.$el)
console.log("msg##", this.name)
console.log("func##", this.init)
},
beforeDestroy(){
console.group("bef des ########")
console.log("data##", this.$data)
console.log("el##", this.$el)
console.log("msg##", this.name)
console.log("func##", this.init)
},
destroyed(){
console.group("des ########")
console.log("data##", this.$data)
console.log("el##", this.$el)
console.log("msg##", this.name)
console.log("func##", this.init)
}
})
</script>
</body>
</html>
