标签:开头 fragment exclude 正则表达式 工程 file 其它 pre 对象
npm install vue-router --save
(在项目运行时依然需要)import Vue from ‘vue‘
+import VueRouter from ‘vue-router‘
),并且调用Vue.use(VueRouter)
<router-link></router-link>
和<router-view></router-view>
<router-view>
渲染首页的内容 多配置一个映射即可
{
path:'/',
redirect:'/home'
}
redirect时重新定向
<router-link to=‘/‘ tag=‘li‘>
App的vue中:
<button @linkToHome>首页</button>
methods:{
linkToHome(){
this.$router.push('./home')
}
}
{
path:'user/:id',
component:User
}
<div>
<h2> {{ $route.params.id}} </h2>
</div>
<router-link to='/user/123'>用户<router-link>
const routes=[
path:'/home'
component:()=>import('../components/About')
{
}
]
方式一: 结合Vue的异步组件和Webpack的代码分析.
const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};
方式二: AMD写法
const About = resolve => require(['../components/About.vue'], resolve);
方式三: 在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割.
const Home = () => import('../components/Home.vue')
/home/news
和/home/message
访问一些内容. 1. 创建对应的子组件,并且在路由映射中配置对应的子路由
{
path: '/home',
component: Home,
children:[
{
path:'news',
component:HomeNews
}
]
}
2. 在组件内部使用`<router-view>`标签
传递方式一:
<router-link
:to="{
path:'/profile/'+123, //params
query:{name:'why',age:18} //query
}"
></router-link>
传递方式二:
methods:{
toProfile(){
this.$router.push({
path:'/profile/'+123, //params
query:{name:'why',age:18}
})
},
}
meta{ title:‘关于‘}
// to:即将进入目标的路由对象,from当前导航的即将要离开的对象,next调用了该方法,才能进入下一个钩子
router.beforeEach(to,from,next) =>{
window.document.title = to.meta.title
next()
}
exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存
<keep-alive exclude="Profile">
<router-view></router-view>
</keep-alive>
标签:开头 fragment exclude 正则表达式 工程 file 其它 pre 对象
原文地址:https://www.cnblogs.com/JCDXH/p/11703202.html