vue-学习知识点总结（四）url跳转加参数、markdown库使用

一、跳转url加上变量参数

1、方式一：使用route-link 标签，to属性跳转

<router-link :to="{ path: '/b/index', query: { id: id, name: name } }">跳转1</router-link>

<router-link :to="{ name: 'index', params: { id: id, name: name } }">跳转2</router-link>
// 省略代码data() {
  return {    id: 10, name: 'OK'  }}

说明：

path - 路由配置的path

name - 路由配置的name

query - 在浏览器url后面加上get请求参数

params - 跳转路由，vue传递的参数，url不会变化

2、方式二：this.$router.push()跳转

this.$router.push({

  name: 'index2',

  params: {

    id: 'P444'

  },

  query: {

    id: 'Query44'

  }

})

属性同上

3、方式三：:href属性

<a :href="iconName">跳转</a>

变量iconName拼接参数即可

4、获取跳转传递的参数

获取浏览器url上的参数query。

如 http://localhost?id=7&name=123

this.$route.query.id // 7
this.$route.query.name // 123

获取跳转路由传递的params。（params不会出现在url中）

this.$route.params.id // 7
this.$route.params.name // 123

二、markdown库使用

marked.setOptions 属性值说明

解释markdown为html内容。

import { marked } from 'marked'
import hljs from 'highlight.js'
import '@/styles/highlight/github-dark.scss'
// 省略代码...
marked.setOptions({

  renderer: new marked.Renderer(),

  highlight: function(code) {

    return hljs.highlightAuto(code).value

  },

  gfm: true,

  tables: true,

  breaks: false,

  pedantic: false,

  sanitize: false,

  smartLists: true,

  smartypants: false

})
this.htmlContent = marked(markdownContent) // markdown内容转为html内容

2.1 highlight 高亮的参数，方法包含三个参数：code，lang和callback

code——代码内容——是一个字符串。

lang——编程语言的种类——也是字符串。

callback就是回调函数。

2.2 renderer 渲染

 render存放的是一个对象，不声明时默认为new Renderer()

2.3 gfm 默认为true，允许 GitHub标准的markdown

2.4 tables 默认为true，允许支持表格语法。该选项要求 gfm 为true

2.5 breaks 默认为false，允许回车换行。该选项要求 gfm 为true

2.6 pedantic 默认为false，尽可能地兼容 markdown.pl的晦涩部分。不纠正原始模型任何的不良行为和错误

2.7 sanitize 默认为false，对输出进行过滤（清理），将忽略任何已经输入的html代码（标签）

2.8 smartLists 默认为false，使用比原生markdown更时髦的列表。 旧的列表将可能被作为pedantic的处理内容过滤掉

2.9 smartypants 默认为false，使用更为时髦的标点，比如在引用语法中加入破折号