vue如何进行路由跳转

这篇文章主要介绍“vue如何进行路由跳转”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue如何进行路由跳转”文章能帮助大家解决问题。vue-router 本质是一个第三方的包用的时候需要下载。步骤（7步法）：1、下载vue-router模块到当前工程


yarnaddvue-router

2、在main.js中引入VueRouter函数


//引入路由
importVueRouterfrom"vue-router";

3、添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件


//注册全局
Vue.use(VueRouter)

4、创建路由规则数组 – 路径和组件名对应关系创建路由规则数组（需要准备切换的页面组件）把准备好的页面组件引入到main.js中


constroutes=[{
path:"/",
redirect:"find"//默认显示推荐组件(路由的重定向)
},
{
path:"/find",
name:"Find",
component:Find,
//二级路由
children:[{
path:"/",
redirect:"recom"//默认显示推荐组件
},
{
path:"ranking",//注意二级路由的路径千万不要加/
component:Ranking
},
{
path:"songlist",
component:SongList
},
]
},
{
path:"/my",
name:"My",
component:My
},
{
path:"/part",
name:"Part",
component:Part
},

{
path:"*",
component:NotFound//定义找不到已有组件时显示404
},
]

5、用规则生成路由对象


//创建路由对象并且传入规则
constrouter=newVueRouter({
routes,
mode:"history"//路由模式(默认为hash模式)
})

6、把路由对象注入到new Vue实例中


newVue({
router,//导入路由对象
render:h=>h(App),
}).$mount('#app')

7、用router-vie免费云主机域名w作为挂载点, 切换不同的路由页面当url的hash值路径切换，显示规则里对应的组件router-view 实现路由内容的地方，引入组件时写到需要引入的地方需要注意的是，使用vue-router控制路由则必须router-view作为容器。（可以先引入根组件App.vue中进行自测）注意:一切都要以url上hash值为准router-link 是vue-router提供了一个全局组件router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)router-link提供了声明式导航高亮的功能(自带类名)代码如下：



//在控制台元素检查时会发现激活的类名在样式style中定义高亮样式点击时就会高亮

router-link好处 : 自带激活时的类名, 可以做高亮在router-link上的to属性传值, 语法格式如下 :(方式一)to=/path?参数名=值例：to="/part?name=小明" 对应页面组件接收传递过来的值$route.query.参数名接收数据：$route.query.name(方式二)to=“/path/值” (需在路由规则里配置/path/:参数名)例：to="/part/小王" 配置：path:"/part/:username"对应页面组件接收传递过来的值（注意动态参数需要用params接收）$route.params.参数名接收数据：$route.params.username用JS代码来进行跳转语法: path或者name任选一个$router : 是路由操作对象，只写对象$route : 路由信息对象，只读对象$ router操作路由跳转


this.$router.push({name:‘hello’,query:{name:‘word’,age:‘11’}})

$route读取路由参数接收


varname=this.$route.query.name;

path 和 name路由跳转方式，都可以用query传参使用path方式跳转路由 path会忽略params 所以path不能和params一起使用推荐使用name和query方式实现路由跳转params传参，push里面只能是 name:‘xxx’,不能是path:‘/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！通过params传参==注意：==这里使用name路由跳转方式路径不需要加 / 因为它只是个名字另一个页面接收:这里使用params传参就需要写params接收通过query传参另一个页面接收query相当于GET请求，页面跳转的时候，可以在地址栏看到请求参数uery传参**另一个页面接收关于“vue如何进行路由跳转”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注百云主机行业资讯频道，小编每天都会为大家更新不同的知识点。

相关推荐: Bootstrap滚动监听插件怎么使用

这篇文章主要介绍了Bootstrap滚动监听插件怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Bootstrap滚动监听插件怎么使用文章都会有所收获，下面我们一起来看看吧。一、用法您可以向顶部导航添加滚动监听行为：1、通过…