博客

history.go(1)前进一步

history.back

history.go(-1)后退一步

history.pushState(‘页面描述’,‘页面标题’,‘页面的地址’) 改变页面地址

vue-router 利用url传递参数 动态路由

在配置文件里以冒号的形式设置参数。我们在/src/router/index.js文件里配置路由。

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/views/GoodsList'
import Params from '@/components/Params'

Vue.use(Router)

export default new Router({
   
  routes: [
    {
   
      path: '/params/:newsId/:newsTitle',
      component: Params
    }
  ]
})

在src/components目录下建立我们params.vue组件，也可以说是页面。我们在页面里输出了url传递的的新闻ID和新闻标题。

<template>
    <div>
        <h2>{
   {
    msg }}</h2>
        <p>新闻ID：{
   {
    $route.params.newsId}}</p>
        <p>新闻标题：{
   {
    $route.params.newsTitle}}</p>
    </div>
</template>
 
<script>
export default {
   
  name: 'params',
  data () {
   
    return {
   
      msg: 'params page'
    }
  }
}
</script>

去掉或加上#

加上mode:‘history’,去掉#

 mode: 'history',

加上mode：‘hash’ == 加上#

 mode: 'hash',

子路由 嵌套路由

index.js

  path: '/goods/:id',
      component:GoodsList,
      children:[
        {
   path:'/title',component: Title},
        {
   path:'/image',component: Image}
      ]

GoodsList.vue

<router-link to='Title'>标题</router-link>
<router-link to='image'>图片</router-link>
<div>