侧边栏壁纸
  • 累计撰写 781 篇文章
  • 累计创建 1 个标签
  • 累计收到 1 条评论
标签搜索

vue router

Dettan
2021-04-10 / 0 评论 / 0 点赞 / 105 阅读 / 2,736 字
温馨提示:
本文最后更新于 2022-04-30,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

在vue ui 里装完vue router插件后,项目自动生成一个router示例
安装
npm install vue-router
yarn add vue-route
使用
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)




示例

示例
main.js
import Vue from 'vue'
import App from './App.vue'
import Router from 'vue-router'
import HelloWorld from './components/HelloWorld'
import testRoute from './components/testRoute'

Vue.use(Router)

Vue.config.productionTip = false

const test1 = {
template: '<div>test1</div>'
}

const router = new Router({
// mode: 'history',
routes: [{
path: '/helloWorld',
component: HelloWorld,
},
{
path: '/test1',
component: test1
}, {
path: '/testRoute/:name',
component: testRoute
}
]
})

new Vue({
render: h => h(App),
router,
}).$mount('#app')

app.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <router-view />
&lt;router-link to=&quot;/helloWorld&quot;&gt;Hello World&lt;/router-link&gt;
&lt;br/&gt;
&lt;router-link to=&quot;/test1&quot;&gt;test1&lt;/router-link&gt;
&lt;br/&gt;
&lt;router-link to=&quot;/testRoute/name&quot;&gt;testRoute&lt;/router-link&gt;

</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
name: 'app',
components:

}
</script>

testRoute.vue 自定义的组件
<template>
	<div>
		<h1>{{comName}}</h1>
		<h1>{{$route.params.name}}</h1>
		<h1>{{$route.params}}</h1>
	</div>
</template>

<script>
export default {
name: 'testRoute',
data: function() {
return {
name: this.$route.params.name
}
},
computed: {
comName: function() {
return this.$route.params.name
}
}
}
</script>



path 里可以用通配符*
例:
{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}
当使用一个通配符时,$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分.
可以用正则
const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/' },
    // params are denoted with a colon ":"
    { path: '/params/:foo/:bar' },
    // a param can be made optional by adding "?"
    { path: '/optional-params/:foo?' },
    // a param can be followed by a regex pattern in parens
    // this route will only be matched if :id is all numbers
    { path: '/params-with-regex/:id(\\d+)' },
    // asterisk can match anything
    { path: '/asterisk/*' },
    // make part of the path optional by wrapping with parens and add "?"
    { path: '/optional-group/(foo/)?bar' }
  ]
})


基础
起步
动态路由匹配 传递参数,匹配符,正则匹配
嵌套路由 子页面
编程式的导航 用js跳转页面的方法
命名路由 多个路由
命名视图 一个页面多个路由显示区域
重定向和别名
路由组件传参 直接把传的参数弄到组件里
HTML5 History 模式 地址栏里不带#,而是传统的地址方式,但是会有小问题
进阶
导航守卫
路由元信息
过渡动效
数据获取 导航完成前或后获取数据
滚动行为 记住滚动的位置
路由懒加载 提升首次加载速度
0

评论区