vue router html模板,Vue-router使用(示例代码)

Vue路由:

--------------------------------------------------------

1 、Vue-rouer入门

2 、子路由

3 、路由传参

4 、多路由区域操作

5 、重定向

6 、过渡动画

7 、404页面

8 、钩子函数

9 、编程式导航

$route.name

传递参数几种方式:

1、利用name {{$route.name}}

相当于封装路由

2、利用导航

页面展示:]

{{$route.params.username}}

url传参:

3、利用url 必须要加冒号

{

path:‘/params/:newsId/:newsTitle‘,

component:Params

}

调用:

params

页面展示:

新闻ID：{{ $route.params.newsId}}

新闻标题：{{ $route.params.newsTitle}}

六、重定向在路由里面配置(redirect)

{

path:‘/goback‘,

redirect:‘/‘

}

带参数重定向:

{

path:‘/params/:newsId(\\d)/:newsTitle‘,

component:Params

},

{

path:‘/goback/:newsId(\\d)/:newsTitle‘,

redirect:‘/params/:newsId(\\d)/:newsTitle‘,

}

七、别名的使用

1、{

path: ‘/hi1‘,

component: Hi1,

alias:‘/jspang‘

}

2、只有子url别名上面的，不能上面的另名下面的，例如下面的就不行

{

path: ‘/‘,

component: Hello,

alias:‘/home‘

}

八、路由中的过滤动画

1、设置：

2、样式：

.fade-enter {

opacity:0;

}

.fade-enter-active{

transition:opacity .5s;

}

.fade-leave{

opacity:1;

}

.fade-leave-active{

opacity:0;

transition:opacity .5s;

}

九、mode的两个值

1)history

2)hash

配置:

export default new Router({

mode:‘history‘,

routes: [

{

path: ‘/‘,

components: {

default:Good,

right:Hi2,

left:Hi1

},

alias:"/first_page"

},

//多域名路由

{

path: ‘/hi‘,

components: {

default:Home,

left:Hi2,

right:Hi1

}

},

{

path:‘/params/:newsId(\\d)/:newsTitle‘,

component:Params

},

{

// path:‘/goback/:newsId(\\d)/:newsTitle‘,

path:‘/goback‘,

redirect:‘/‘,

}

]

})

十、404页面的设置

第一步：在路由的结束加下

先定义一个404页面

{path:"*",component:Error}

十一、路由中的钩子

钩子函数：生命周期中每个环节执行的函数

可以配置地方：

1)路由

{

path: ‘/‘,

components: {

default:Good,

right:Hi2,

left:Hi1

},

alias:"/first_page",

beforeEnter(to,from,next){

console.log(to)

console.log(from)

console.log("我马上要进入主页了...")

}

},

2)组件模板中配置

export default {

name: ‘Good‘,

data () {

return {

msg: ‘欢迎来到商品页‘

}

},

beforeRouteEnter(to,from,next){

console.log("进入首页前");

next()

},

beforeRouteLeave(to,from,next){

console.log("离开首页前")

next()

}

}

十二、编程式导航

1、跳转到上一个路由

2、路转到下一个路由

3、直接跳转，用于逻辑判断

export default {

name: ‘App‘,

methods:{

go(){

this.$router.go(-1)

},

ba(){

this.$router.go(1)

},

first(){

this.$router.push("/");

}

}

}