vue-router的三要素详解：路由map 、路由视图、路由导航

2022-01-05 18:58:42 阅读：237 来源： 互联网

标签：map ids 视图 params router home 参数路由

使用vue-router模块

使用vue-router前要先安装vue-router库

cnpm install vue-router –save

vue-router三要素

路由map、路由视图、路由导航
路由map指路由与组件的映射关系；
路由视图指路由映射对应组件的渲染位置；
路由导航指可以使地址栏发生变化的导航链接。

1、路由map

import Vue from 'vue'
import App from './App'
//1、在入口文件main.js里引入
import VRouter from 'vue-router'
Vue.config.productionTip = false
//2、用全局方法use()来注册使用vue-router
Vue.use(VRouter);
//4、实例化全局router  
let router=new VRouter({
   //以下是路由map
    routes:[
        {
            path:'/apple',
            component:Apple
        },
        {
            path:'/banana',
            component:Banana
        }
    ]
});
new Vue({
  el: '#app',
  router,
  //3、注册组件
  components: { App,VRouter},
  template: '<App/>'
})

补充：路由的默认路径

默认情况下, 进入网站的首页，我们希望渲染首页的内容。如何可以让路径默认跳到到首页，并且渲染首页组件呢?

只需要多配置一个映射就可以了：
在这里插入图片描述
redirect是重定向，也就是将根路径重定向到/home路径下，这样打开页面时就会默认显示首页的内容了。

2、路由视图

<router-view></router-view>

3、路由导航< router-link>

（在vue2.0中，原来的v-link指令已经被组件替代了）

方法1：< router-link> 创建 a 标签来定义导航链接

router-link默认是触发router.push(location)，如果设置的replace 则触发router.replace(location)，router.replace在导航后不会留下history记录，也就是不能回退到上一个页面
to里的值可以是一个字符串路径，或者一个描述地址的对象，如：

// 字符串
<router-link to="home">home</router-link>
// 对象
<router-link :to="{path:'home'}">home</router-link>
// 命名路由
<router-link :to="{name: 'homename'}">home</router-link>
//直接路由带查询参数query，地址栏变成 /home?ids=111
<router-link :to="{path: 'home', query: {ids: '111' }}">home</router-link>
// 命名路由带查询参数query，地址栏变成/home?ids=111
<router-link :to="{name: 'homename', query: {ids: '111'}}">home</router-link>
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
<router-link :to="{path: 'home', params: {ids: '111' }}">home</router-link>
// 命名路由带路由参数params，地址栏是/apple/111
<router-link :to="{name: 'homename', params: { ids: '111' }}">home</router-link>

方法2：router.push 方法

这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的url。
router.push()方法里的值也可以是一个字符串路径，或者一个描述地址的对象，和上述to中规则类似。

// 字符串
router.push('home')
// 对象
router.push({path:'home'})
// 命名路由
router.push({name: 'homename'})
//直接路由带查询参数query，地址栏变成 /home?ids=111
router.push({path: 'home', query: {ids: '111'}})
// 命名路由带查询参数query，地址栏变成/home?ids=111
router.push({name: 'homename', query: {ids: '111'}})
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
router.push({path:'homename', params:{ids: '111'}})
// 命名路由带路由参数params，地址栏是/home/111
router.push({name:'homename', params:{ids: '111'}})

方法3：router.replace()

跟router.push作用是一样的，但是，它不会向history添加新记录，而是跟它的方法名一样替换掉当前的history记录。所以导航后不会留下history记录，也就是不能回退到上一个页面

方法4：router.go(n)

这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步，类似window.history.Go(n)

注意：

**1、**在通过params传递参数时,只能用 name:’/xxx’ ，不能用 path:’/xxx’ ,否则接收参数时会出现Undefined ； 因为params只能用name来引入路由，query用path、name都可以引入。
**2、**一般情况下，通过query方式传参，刷新页面后依然可以获取到刷新前传过来的参数，而通过params传递参数时，刷新后会导致参数丢失出现Undefined

但是我想要params在地址栏上的简洁，又想要query刷新不丢失参数怎么办？

那我们就需要在params的基础上给路由声明一下参数，再刷新就不会丢失了

例如：添加“: id”

   {
      path: '/XXXX/:id',
      name: 'XXXX',
      component: component
    },

效果：
在这里插入图片描述
这种在路由上声明参数的写法，当使用跳转时，需要添加参数，否则跳转后页面啥也不会显示！！！
**3、**获取参数方法：

在组件中： {{KaTeX parse error: Expected 'EOF', got '}' at position 17: …oute.params.ids}̲}、{{route.query.ids}}
在js里： this. r o u t e . p a r a m s . i d s 、 t h i s . route.params.ids、this. route.params.ids、this.route.query.ids

标签：map,ids,视图,params,router,home,参数,路由
来源： https://blog.csdn.net/Maybe_ss/article/details/122298712

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9