前端路由和后端路由：前端路由和后端路由：

后端路由：对于普通的网站，所有的超链接都是url地址，所有url都对应服务器上对应的资源

前端路由：对于单页面应用程序来说，主要通过url的hash（#）来实现不同页面的切换，同时hash还有一个特点HTTP请求中不会包含hash相关的内容，所以单页面程序中的页面跳转主要用hash实现


后端路由：对于普通的网站，所有的超链接都是url地址，所有url都对应服务器上对应的资源前端路由：对于单页面应用程序来说，主要通过url的hash（#）来实现不同页面的切换，同时hash还有一个特点HTTP请求中不会包含hash相关的内容，所以单页面程序中的页面跳转主要用hash实现

在单页面应用程序中这种通过hash来改变页面的方式称作前端路由区别于后端路由路由的使用路由的使用1.创建一个路由对象，当导入vue-router包之后，在window全局对象中就有一个路由的构造函数VueRouter2.在new路由对象的时候可以传递一个配置对象，这个配置对象的route表示路由器的匹配规则3.每个路由规则都是一个对象，这个规则对象身上必须有两个属性

属性1 path表示监听哪个路由链接地址

属性2 component，表示如果路由是前面匹配到的path，则展示component属性对应的组件，component属性值必须是一个组件模板对象，不能是组件的引用名称
属性1 path表示监听哪个路由链接地址属性2 component，表示如果路由是前面匹配到的path，则展示component属性对应的组件，component属性值必须是一个组件模板对象，不能是组件的引用名称
var login={

template:'

登录

'

}

var register={

template:'

注册

'

}

var routerObj=new VueRouter({

routes:[

{path:'/login',component:login},

{path:'/register',component:register}


]

})
var login={

template:'

登录

'

}

var register={

template:'

注册

'

}

var routerObj=new VueRouter({

routes:[

{path:'/login',component:login},

{path:'/register',component:register}


]

})4.router:routerObj将路由规则对象注册到VM实例上，用来监听URL地址的变化，然后展示对应的组件
var vm=new Vue({

el:'#div1',

data:{



},

methods:{



},

router:routerObj




})
var vm=new Vue({

el:'#div1',

data:{



},

methods:{



},

router:routerObj




})5.在控制的div中使用

6.在搜索栏输入对应的匹配规则，login7.使用vue官方提供的router-link元素使用，它默认渲染为一个a标签
登录
注册
登录
注册路由重定向路由重定向1.设置一个默认展示组件，不推荐
{path:'/',component:login},
{path:'/',component:login},2.路由redirect重定向，设置默认组件
{path:'/',redirect:'login'},
{path:'/',redirect:'login'},路由传参路由传参1.如果使用查询字符串 给路由传递参数则不需要修改路由规则的path属性

登录

登录2.使用query传递参数
var login={

template:'

登录----{{$route.query.id}}

'

}
var login={

template:'

登录----{{$route.query.id}}

'

}3.通过params方式传递路由参数，login后面会被解析为id的值
登录
登录
var login={

template:'

登录----{{$route.params.id}}

'

}
var login={

template:'

登录----{{$route.params.id}}

'

}
{path:'/login/:id',component:login},
{path:'/login/:id',component:login},路由的嵌套路由的嵌套使用children属性实现路由嵌套,子路由path前不要加/，否则永远以根路径开始请求








var router=new VueRouter({

routes:[

{path:'/account',component:account,

children:[

{path:'login',component:login},

{path:'register',component:register}

]}

]

})
var router=new VueRouter({

routes:[

{path:'/account',component:account,

children:[

{path:'login',component:login},

{path:'register',component:register}

]}

]

})命名视图命名视图命名视图在components（这时会多个s）后加属性再在使用的时候用name引入,可以使一个页面中存在多个路由












var router=new VueRouter({

routes:[

{path:'/',components:{

default:header,

left:leftBox,

main:mainBox

}},



]

})
var router=new VueRouter({

routes:[

{path:'/',components:{

default:header,

left:leftBox,

main:mainBox

}},



]

})以上就是详解vue路由的详细内容，关于vue路由的资料请关注其它相关文章！