Vue应用vue-router实现路由

永yuan的one

于 2023-12-25 20:52:05 发布

阅读量873

点赞数 19

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2201_75982399/article/details/135208571

版权

1、引入插件

或者 npm install vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

2、基础用法

应用Vue.js和vue-router可以创建简单的单页应用。使用Vue.js可以通过多个组件来组成应用程序，而vue-router的作用是将每个路径映射到对应的组件，并通过路由进行组件之间的切换。Vue.js路由允许通过不同的URL访问不同的内容，通过路由实现组件之间的切换需要使用<router-link>组件，该组件用于设置一个导航链接，通过to属性设置目标地址，从而切换不同的html内容。

<div id="element">
<p>



<router-link to="/first">页面一</router-link>
<router-link to="/second">页面二</router-link>
<router-link to="/third">页面三</router-link>
</p>

<router-view></router-view>
</div>
<script src="http://60.205.187.0/vue/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script type="text/javascript">
var first={
template:'<div>这是页面一</div>'
};
var second={
template:'<div>这是页面二</div>'
};
var third={
template:'<div>这是页面三</div>'
};
//定义路由，每个路由应该映射一个组件。其中component可以是通过Vue.extend()创建的组件构造器，或者是一个组件选项对象
var routes=[
{path:'/first',component:first},
{path:'/second',component:second},
{path:'/third',component:third},
];
//创建router实例，传入routes配置参数，还可以传入其他配置参数
var router=new VueRouter({
routes:routes
})
//创建和挂载根实例.通过router配置参数注入路由，让整个应用都有路由功能
var app=new Vue({
router:router
}).$mount('#element');
</script>

3、路由动态匹配

在实际开发中，经常需要将某种模式匹配到的所有路由全部映射到同一个组件，例如，对于所有不同ID的用户，都需要使用同一个组件User来渲染。那么可以在vue-router的路由路径中使用动态路径参数来实现这个效果。示例：

<div id="element">
<p>
<router-link to="/user/1">ID 1</router-link>
<router-link to="/user/2">ID 2</router-link>
<router-link to="/user/3">ID 3</router-link>
</p>

<router-view></router-view>
</div>
<script src="http://60.205.187.0/vue/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script type="text/javascript">

var User ={
template:'<div>用户ID:{{$route.params.id}}页面</div>'
}

var router=new VueRouter({
routes:[
{path:'/user/:id',component:User}
]
})

var app=new Vue({
router:router
}).$mount('#element');

</script>

上述代码中，:id即为设置的动态路由参数。这时像/user/1，/user/2这样的路径都会映射到相同的组件。当匹配到一个路由时，参数值可以通过$route.params的方式获取，并且可以在每个组件内使用。常规路径参数只会匹配被 “/” 分割的URL片段中的字符。如果想匹配任意路劲，可以使用通配符 * 。例如，path: '*'会匹配所有路径。path : ' /user-* '会匹配以‘/user-’开头的任意路径。当使用通配符路由时，需要确保正确的路由顺序，也就是说含有通配符的路由应该放在最后。

4、嵌套路由

有些界面通常是由多层嵌套的组件组合而成，例如，二级导航菜单就是这种情况。这时就需要使用嵌套路由。使用嵌套路由时，URL中各段动态路径会按某种结构对应嵌套的各层组件。

<router-view>是最顶层的出口，用于渲染最高级路由匹配到的组件。同样，一个被渲染的组件的模板中同样可以包含嵌套的<router-view>，要在嵌套的出口中渲染组件，需要在VueRouter中使用children参数进行配置。示例：

<div id="element">
<p>
<router-link to="/user/1">用户ID 1</router-link>
<router-link to="/user/2">用户ID 2</router-link>
<router-link to="/user/3">用户ID 3</router-link>
</p>

<router-view></router-view>
</div>
<script src="http://60.205.187.0/vue/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script type="text/javascript">

var User ={
template:`<div>
<p>用户ID:{{$route.params.id}}页面 </p>
<router-link to="/user/1/sex">性别</router-link>
<router-link to="/user/1/age">年龄</router-link>
<router-view></router-view>
</div>`
}

var UserSex ={
template:`<div>
<p>用户ID:{{$route.params.id}}性别页面 </p>
</div>`
}

var UserAge ={
template:`<div>
<p>用户ID:{{$route.params.id}}年龄页面 </p>
</div>`
}

var router=new VueRouter({
routes:[
{
path:'/user/:id',
component:User,
children:[
{
path:'sex',
component: UserSex
},
{
path:'age',
component: UserAge
}
]
}
]
})

var app=new Vue({
router:router
}).$mount('#element');

</script>

5、命名路由

在进行路由跳转的时候，可以为较长的路径设置一个别名。在创建VueRouter实例的时候，在routes配置中可以为某个路由设置名称。实例：

var router=new VueRouter({
routes:[
{
path:'/user/:id',
name:'user',
component:User
}
]
})

在设置了路由的名称之后，要想连接到该路径，可以为router-link的to属性传入一个对象。代码如下：

<router-link :to="{{ name:'user',params:{ id:1 } }}"></router-link>

6、应用push()方法定义导航

使用<router-link>创建<a>标签可以定义导航链接。除此之外，还可以使用router的实例方法push()实现导航的功能。在Vue实例内部可以通过$router访问路由实例，因此通过调用this.$router.push即可实现页面的跳转。

该方法的参数可以是一个字符串路径，或者是一个描述地址的路径。示例：
//跳转到字符串表示的路径
this.$router.push('home')
//跳转到指定路径
this.$router.push({path:'home'})
//跳转到指定命名的路由
this.$router.push({name:'home'})
//跳转到指定路径并带有查询参数
this.$router.push({path:'home',query:{id:'1'}})
//跳转到指定路由并带有查询参数
this.$router.push({name:'user',params:{id:'1'}})

7、命名视图

有些页面布局分为顶部、左侧导航和主内容3个部分，这种情况下需要将每个部分定义为一个视图。为了在界面中展示多个视图，需要为每个视图（router-view）进行命名，通过名字进行对组件的渲染。在界面中可以有单独命名的视图，而不是只有一个单独的出口。如果没有为router-view设置名称，那么它的名称默认为default。例如，为界面设置多视图的代码如下:

<div id="element">
<ul>
<li>
<router-link to="/one">界面一</router-link>
</li>
<li>
<router-link to="/two">界面二</router-link>
</li>
</ul>
<router-view class="left" name="left"></router-view>
<router-view class="main" name="main"></router-view>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script type="text/javascript">

var LeftOne = {
template: '<div>左侧导航栏一</div>'
};
var MainOne = {
template: '<div>主内容一</div>'
};
var LeftTwo = {
template: '<div>左侧导航栏二</div>'
};
var MainTwo = {
template: '<div>主内容二</div>'
};

var router = new VueRouter({
routes: [
{
path: '/one',
components: {
left: LeftOne,
main: MainOne
}
},
{
path: '/two',
components: {
left: LeftTwo,
main: MainTwo
}
}
]
})

//创建根实例
var demo = new Vue({
el: '#element',
router
})
</script>

8、重定向

如果要为访问的路径设置了重定向规则，则访问该路径时会被重定向到指定的路径。例如：设置路径从/a重定向到/b的代码如下:

//重定向路径
var router = new VueRouter({
routes:
[
{ path: '/a', redirect: '/b' }
]
})

//重定向命名路由
var router = new VueRouter({
routes:
[
{ path: '/a', redirect: { name: 'XXX' } }
]
})